{% extends "base.html" %}
{% block content %}
<a href="/matches" class="xs muted">← Maçlar</a>

<div style="display:flex;align-items:center;gap:18px;margin:10px 0 6px">
  <h1 style="margin:0">{{ m.home_team }} <span class="muted">-</span> {{ m.away_team }}</h1>
  {% if m.home_score is not none %}
  <span style="font-size:24px;font-weight:650">{{ m.home_score }} - {{ m.away_score }}</span>
  {% endif %}
  {% if m.status=='live' %}<span class="tag t-good">● canlı</span>
  {% elif m.status=='ht' %}<span class="tag t-warn">devre arası</span>
  {% elif m.status=='finished' %}<span class="tag t-idle">bitti</span>
  {% else %}<span class="tag t-info">{{ m.kickoff|tr }}</span>{% endif %}
</div>
<p class="sub">
  {{ m.league.name if m.league else '—' }} ·
  Anlatım: <b class="dim">{{ labels[tier] }}</b>
  {% if m.hashtag %}
    · Maç etiketi: <b style="color:var(--s1)">{{ m.hashtag }}</b>
    <span class="xs muted">(yayıncıdan öğrenildi, tweetlerimize eklenir)</span>
  {% else %}
    · <span class="xs muted">maç etiketi henüz öğrenilmedi</span>
  {% endif %}
  {% if m.thread_tweet_id %}
    · <a href="https://x.com/i/status/{{ m.thread_tweet_id }}" target="_blank" style="color:var(--s1)">Thread'i X'te aç ↗</a>
  {% endif %}
</p>

<div class="grid g2">
  <!-- ---------- Olay akışı ---------- -->
  <div class="card">
    <div class="card-h">
      <h2>Olay akışı</h2>
      <span class="xs muted">{{ events|length }} olay</span>
    </div>
    <div class="card-b" style="padding:6px 18px 14px">
      {% if events %}
      <table><tbody>
        {% for e in events %}
        {% set p = post_by_event.get(e.id) %}
        <tr>
          <td class="num muted" style="width:44px;padding-left:0">{{ e.minute }}{% if e.minute %}'{% endif %}</td>
          <td>
            <b>{{ e.event_type }}</b>
            {% if e.player %}<span class="dim">· {{ e.player }}</span>{% endif %}
            {% if e.team %}<div class="xs muted">{{ e.team }}</div>{% endif %}
          </td>
          <td class="num" style="padding-right:0">
            {% if p and p.status=='posted' %}
              <span class="tag t-good">gönderildi</span>
            {% elif p and p.status in ['queued','approved'] %}
              <span class="tag t-info">kuyrukta</span>
            {% elif p and p.status=='cancelled' %}
              <span class="tag t-idle">iptal</span>
            {% elif p and p.status=='failed' %}
              <span class="tag t-bad">hata</span>
            {% elif e.event_type not in allowed %}
              <span class="tag t-idle" title="Bu ligin anlatım seviyesi bu olayı kapsamıyor">kapsam dışı</span>
            {% else %}
              <span class="tag t-idle">—</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody></table>
      {% else %}
      <p class="empty">Henüz olay yakalanmadı.</p>
      {% endif %}
    </div>
  </div>

  <!-- ---------- Thread ---------- -->
  <div class="card">
    <div class="card-h">
      <h2>Bu maçın thread'i</h2>
      <span class="xs muted">{{ posts|length }} tweet</span>
    </div>
    <div class="card-b">
      {% if posts %}
      {% for p in posts %}
        {% if loop.first or not p.is_reply %}
        <div style="margin-bottom:10px">
          <div class="xs muted" style="margin-bottom:4px">
            {% if p.is_reply %}↳ yanıt{% else %}● kök tweet{% endif %} ·
            {{ p.kind }} ·
            {% if p.status=='posted' %}{{ p.posted_at|tr('%H:%M') }}{% else %}{{ p.status }}{% endif %}
          </div>
          <div class="tw">{{ p.content }}</div>
        </div>
        {% else %}
        <div class="thread" style="margin-bottom:10px">
          <div class="xs muted" style="margin-bottom:4px">
            ↳ {{ p.kind }} ·
            {% if p.status=='posted' %}{{ p.posted_at|tr('%H:%M') }}
              {% if p.tweet_id and p.tweet_id != 'unknown' %}
              · <a href="https://x.com/i/status/{{ p.tweet_id }}" target="_blank" style="color:var(--s1)">X'te ↗</a>
              {% endif %}
            {% elif p.status=='cancelled' %}<span class="muted">iptal — {{ p.error }}</span>
            {% else %}{{ p.status }}{% endif %}
          </div>
          <div class="tw">{{ p.content }}</div>
        </div>
        {% endif %}
      {% endfor %}
      {% else %}
      <p class="empty">Bu maç için henüz tweet üretilmedi.</p>
      {% endif %}
    </div>
  </div>
</div>

<div class="card pad" style="margin-top:14px">
  <div class="xs muted">
    <b class="dim">Kapsam:</b> Bu lig <b class="dim">{{ labels[tier] }}</b> seviyesinde.
    Yayınlanan olay tipleri: {{ allowed|join(', ') }}.
    <a href="/leagues" style="color:var(--s1)">Değiştir →</a>
  </div>
</div>
{% endblock %}