{% extends "base.html" %}

{% block title %}HKFC Men's C Team - Match Comments{% endblock %}

{% block content %}
<!-- Match Header -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <h2 class="card-title">
          <i class="fas fa-comments me-2"></i>Match Comments
        </h2>
        
        <!-- Team Logos -->
        <div class="d-flex justify-content-center align-items-center mt-3">
          <div class="text-center me-4">
            <img src="{{ hkfcLogo }}" alt="HKFC Logo" class="img-fluid" style="max-height: 100px;">
            <div class="mt-2">
              <strong>HKFC</strong>
            </div>
          </div>
          <div class="text-center mx-3">
            <h4 class="text-primary">VS</h4>
          </div>
          <div class="text-center ms-4">
            <img src="{{ oppoLogo }}" alt="Opponent Logo" class="img-fluid" style="max-height: 100px;">
            <div class="mt-2">
              <strong>Opponent</strong>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Comments Section -->
<div class="row">
  <div class="col-lg-8 mx-auto">
    {% if comments %}
      {% for comment in comments %}
        <div class="card mb-3">
          <div class="card-body">
            <div class="d-flex align-items-start">
              <div class="flex-shrink-0">
                <i class="fas fa-comment-dots text-primary fs-4"></i>
              </div>
              <div class="flex-grow-1 ms-3">
                <p class="mb-0">{{ comment.comment }}</p>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    {% else %}
      <div class="card">
        <div class="card-body text-center">
          <i class="fas fa-comment-slash text-muted fs-1 mb-3"></i>
          <h5 class="text-muted">No comments yet</h5>
          <p class="text-muted">Comments for this match will appear here once they are added.</p>
        </div>
      </div>
    {% endif %}
  </div>
</div>

<!-- Navigation -->
<div class="row mt-4">
  <div class="col-12 text-center">
    <a href="/" class="btn btn-primary">
      <i class="fas fa-home me-2"></i>Back to Home
    </a>
  </div>
</div>
{% endblock %}