{% extends "base.html" %}
{% block content %}
<style>
  /* Theme-aware surfaces using the user’s --accent from base.html */
  .accentBorder { border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,0.10)); }
  .accentBorderSoft { border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.10)); }

  .accentCard {
    background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.03));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.10));
    border-radius: 12px;
  }

  .accentThumb {
    background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.05));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.10));
  }

  .accentLink {
    color: var(--accent);
  }
  .accentLink:hover { text-decoration: underline; }

  .accentMutedLink {
    color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.65));
  }
  .accentMutedLink:hover { color: var(--accent); }
</style>


{# ===== TOP HEADER (STACKED) ===== #}
<div style="margin-top:10px;">
  <div class="row between" style="align-items:flex-end; gap:12px;">
    <div>
      <div class="kicker"></div>
      <h1 style="margin:6px 0 0; margin-top: 140px;">All Shows</h1>
      <div class="muted small">Browse, sort, and click a show to rate and review.</div>
    </div>

    {# ===== WELCOME (TOP MIDDLE) ===== #}
    <div style="flex:1; text-align:center; padding-bottom:2px;">
      <div style="font-weight:900; font-size:42px; line-height:1.2; margin-top: 0px;">
        Welcome to Pressboxd!
      </div>
      <div class="muted small" style="margin-top:80px;">
        This website is still in early development. Feel free to send suggestions to *email_here*.
      </div>
    </div>

    {# right side spacer to keep true middle centering (no layout shift) #}
    <div style="width:220px;"></div>
  </div>

  {# =========================
     FRIEND ACTIVITY (FULL WIDTH + POSTER THUMB)
     ========================= #}
  {% if me %}
    <div class="panel" style="margin-top:12px; padding:12px;">
      <div class="row between" style="align-items:center; margin-bottom:-10px;">
        <div style="font-weight:900;">Friend activity</div>
        <a class="muted small" href="{{ url_for('my_friends') }}" style="text-decoration:none;">Friends</a>
      </div>

      {% if friend_activity and friend_activity|length > 0 %}
        <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; margin-top: 20px;">
          {% for a in friend_activity %}
            {% set ak = a.keys() %}
            {% set kind = a["kind"] if "kind" in ak else "" %}
            {% set who  = a["actor_username"] if "actor_username" in ak else "Someone" %}
            {% set sid  = a["show_id"] if "show_id" in ak else None %}
            {% set corpsv = a["corps"] if "corps" in ak else "" %}
            {% set yearv  = a["year"] if "year" in ak else "" %}
            {% set ts   = a["ts"] if "ts" in ak else "" %}
            {% set poster_thumb = (a["poster_url"] if "poster_url" in ak else "") %}

            <div style="width:340px; flex:0 0 auto; padding:10px; border-radius:12px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);">
              <div style="display:flex; gap:10px; align-items:flex-start;">

                <div style="width:60px; height:80px; overflow:hidden; flex:0 0 auto; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);">
                  {% if poster_thumb %}
                    {% if sid %}
                      <a href="{{ url_for('show_detail', show_id=sid) }}" style="display:block; width:100%; height:100%;">
                        <div style="width:100%; height:100%;
                                    background-image:url('{{ poster_thumb }}');
                                    background-repeat:no-repeat;
                                    background-position:center center;
                                    background-size:contain;"></div>
                      </a>
                    {% else %}
                      <div style="width:100%; height:100%;
                                  background-image:url('{{ poster_thumb }}');
                                  background-repeat:no-repeat;
                                  background-position:center center;
                                  background-size:contain;"></div>
                    {% endif %}
                  {% else %}
                    <div style="width:100%; height:100%;"></div>
                  {% endif %}
                </div>

                <div style="min-width:0;">
                  <div class="small" style="line-height:1.25;">
                    <b>{{ who }}</b>
                    {% if kind == "rating" %}
                      rated
                    {% elif kind == "review" %}
                      reviewed
                    {% else %}
                      did something on
                    {% endif %}

                    {% if sid %}
                      <a href="{{ url_for('show_detail', show_id=sid) }}" style="text-decoration:none;">
                        {{ corpsv }}{% if yearv %} {{ yearv }}{% endif %}
                      </a>
                    {% else %}
                      {{ corpsv }}{% if yearv %} {{ yearv }}{% endif %}
                    {% endif %}

                    {% if kind == "rating" and "rating_half" in ak and a["rating_half"] is not none %}
                      {% set stars = (a["rating_half"]|int) / 2 %}
                      <span class="muted">({{ stars }}★)</span>
                    {% endif %}
                  </div>
                </div>

              </div>
            </div>
          {% endfor %}
      </div>
      {% else %}
        <div class="muted small">No recent friend activity.</div>
      {% endif %}
    </div>
  {% endif %}
</div>

<div class="panel" style="margin-top:14px;">
  <form method="get" action="{{ url_for('shows') }}" class="row gap" style="flex-wrap:wrap; align-items:flex-end;">
    <div class="field" style="min-width:220px;">
      <label>Sort</label>
      <select name="sort">
        <option value="" {% if not sort %}selected{% endif %}>Default</option>
        <option value="year_new" {% if sort=='year_new' %}selected{% endif %}>Year (New → Old)</option>
        <option value="year_old" {% if sort=='year_old' %}selected{% endif %}>Year (Old → New)</option>
        <option value="top" {% if sort=='top' %}selected{% endif %}>Top Average Rating</option>
        <option value="bottom" {% if sort=='bottom' %}selected{% endif %}>Lowest Average Rating</option>
        <option value="corps" {% if sort=='corps' %}selected{% endif %}>Corps (A → Z)</option>
      </select>
    </div>

    <div class="field" style="width:140px;">
      <label>Year</label>
      <input name="year" value="{{ year or '' }}" placeholder="2014">
    </div>

    <div class="field" style="min-width:240px;">
      <label>Corps</label>
      <input name="corps" value="{{ corps or '' }}" placeholder="Blue Devils">
    </div>

    <div class="actions">
      <button class="btn green" type="submit">Apply</button>
      <a class="btn ghost" href="{{ url_for('shows') }}">Reset</a>
    </div>
  </form>
</div>

{% if rows and rows|length > 0 %}
  <div class="postergrid" style="margin-top:14px;">
    {% for row in rows %}

      {# --- safe field reads (sqlite3.Row supports keys()) --- #}
      {% set keys = row.keys() %}
      {% set poster = row["poster_url"] if "poster_url" in keys else "" %}
      {% set yearv = row["year"] if "year" in keys else "" %}
      {% set corpsv = row["corps"] if "corps" in keys else "" %}
      {% set titlev = row["title"] if "title" in keys else "Untitled" %}
      {% set cnt = row["cnt"] if "cnt" in keys and row["cnt"] is not none else 0 %}
      {% if "avg_rating" in keys and row["avg_rating"] is not none %}
        {% set avg = row["avg_rating"] %}
      {% elif "avg" in keys and row["avg"] is not none %}
        {% set avg = row["avg"] %}
      {% else %}
        {% set avg = 0 %}
      {% endif %}

      <a class="poster" href="{{ url_for('show_detail', show_id=row['id']) }}">
        <div class="poster_art">
          {% if poster %}
            <img class="poster_img" src="{{ poster }}" alt="{{ titlev }} poster" loading="lazy">
          {% else %}
            <div class="poster_fallback"></div>
          {% endif %}

          {% if yearv %}
            <div class="tile_year">{{ yearv }}</div>
          {% endif %}

          {% if cnt and cnt > 0 %}
            {% set pct = (avg / 5.0) %}
            {% if pct < 0 %}{% set pct = 0 %}{% endif %}
            {% if pct > 1 %}{% set pct = 1 %}{% endif %}
            {% set curve = pct ** 2.6 %}
            {% set hue = 60 * curve %}

            <div class="tile_rating" style="color: hsl({{ hue }}, 98%, 62%);">
              <span class="tile_star">★</span> {{ "%.2f"|format(avg) }}
            </div>
            <div class="tile_count">{{ cnt }} ratings</div>
          {% else %}
            <span class="badge unrated bottom_left">Unrated</span>
          {% endif %}
        </div>

        <div class="poster_meta">
          <div class="poster_title">{{ titlev }}</div>
          <div class="poster_sub">{{ corpsv }}</div>
        </div>
      </a>

    {% endfor %}
  </div>
{% else %}
  <div class="panel" style="margin-top:14px;">
    <div class="muted">No shows found.</div>
  </div>
{% endif %}

{% endblock %}