{% extends 'base.html' %}

{% block title %}{{ announcement.title }} — WildWatch{% endblock %}

{% block content %}
<div class="container py-md" style="max-width:760px;">
  <div style="margin-bottom:24px;">
    <a href="{% url 'announcements' %}" style="color:var(--text-muted); font-size:0.88rem;">
      <i class="fa-solid fa-arrow-left me-2"></i>All Announcements
    </a>
  </div>

  <article style="background:var(--bg-card); border-radius:var(--radius-xl); padding:40px; border:1px solid var(--border-light); {% if announcement.priority == 'high' %}border-top:4px solid #ef4444;{% elif announcement.is_pinned %}border-top:4px solid var(--moss);{% endif %}">
    <div style="display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center;">
      {% if announcement.is_pinned %}
      <span style="background:rgba(90,138,74,0.12); color:var(--moss); font-size:0.72rem; font-weight:700; padding:3px 12px; border-radius:100px; text-transform:uppercase;">📌 Pinned</span>
      {% endif %}
      <span style="font-size:0.72rem; font-weight:700; padding:3px 12px; border-radius:100px; text-transform:uppercase; {% if announcement.priority == 'high' %}background:rgba(239,68,68,0.1); color:#ef4444;{% else %}background:rgba(59,130,246,0.1); color:#3b82f6;{% endif %}">
        {{ announcement.get_priority_icon }} {{ announcement.get_priority_display }}
      </span>
    </div>

    <h1 style="font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--text-primary); margin-bottom:16px; line-height:1.3;">{{ announcement.title }}</h1>

    <div style="display:flex; align-items:center; gap:16px; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border-light); font-size:0.82rem; color:var(--text-muted); flex-wrap:wrap;">
      <span>
        {% if announcement.author.profile.profile_photo %}
          <img src="{{ announcement.author.profile.profile_photo.url }}" style="width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px;" alt="">
        {% endif %}
        <strong style="color:var(--text-secondary);">{{ announcement.author.username }}</strong>
      </span>
      <span><i class="fa-regular fa-calendar me-1"></i>{{ announcement.created_at|date:"M d, Y" }}</span>
      <span><i class="fa-regular fa-clock me-1"></i>{{ announcement.created_at|timesince }} ago</span>
    </div>

    <div style="color:var(--text-secondary); font-size:0.95rem; line-height:1.85; white-space:pre-line;">{{ announcement.content }}</div>
  </article>
</div>
{% endblock %}