{% extends 'base.html' %}
{% load static %}

{% block title %}Announcements — WildWatch{% endblock %}

{% block content %}
<div style="background:linear-gradient(135deg,var(--forest-deep),var(--earth-dark)); padding:48px 0 32px;">
  <div class="container">
    <div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap;">
      <div style="font-size:2.5rem;">📣</div>
      <div>
        <h1 style="font-family:var(--font-display); color:var(--cream); font-size:2rem; margin-bottom:4px;">Club Announcements</h1>
        <p style="color:var(--sage); font-size:0.92rem;">Official updates from the WildWatch team</p>
      </div>
    </div>
  </div>
</div>

<div class="container py-md" style="max-width:800px;">
  {% if announcements %}
    {% for ann in announcements %}
    <article style="background:var(--bg-card); border-radius:var(--radius-xl); padding:28px 32px; border:1px solid var(--border-light); margin-bottom:18px; {% if ann.is_pinned %}border-left:4px solid var(--moss);{% endif %}{% if ann.priority == 'high' %}border-left:4px solid #ef4444;{% endif %} transition:all 0.2s;">
      <div style="display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap;">
        <span style="font-size:1.6rem; flex-shrink:0;">{{ ann.get_priority_icon }}</span>
        <div style="flex:1;">
          <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;">
            {% if ann.is_pinned %}
            <span style="background:rgba(90,138,74,0.12); color:var(--moss); font-size:0.7rem; font-weight:700; padding:2px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:0.5px;">📌 Pinned</span>
            {% endif %}
            <span style="font-size:0.72rem; font-weight:700; padding:2px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:0.5px; background:rgba({{ ann.get_priority_color }},0.1); color:{{ ann.get_priority_color }};">
              {% if ann.priority == 'high' %}🚨 Urgent{% elif ann.priority == 'low' %}Low Priority{% else %}General{% endif %}
            </span>
          </div>
          <a href="{% url 'announcement_detail' ann.pk %}" style="font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--text-primary); text-decoration:none; line-height:1.3; display:block;">{{ ann.title }}</a>
        </div>
      </div>

      <p style="color:var(--text-secondary); font-size:0.9rem; line-height:1.7; margin-bottom:16px;">
        {{ ann.content|truncatechars:250 }}
      </p>

      <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;">
        <div style="font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:12px;">
          <span>
            {% if ann.author.profile.profile_photo %}
              <img src="{{ ann.author.profile.profile_photo.url }}" style="width:20px;height:20px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:4px;" alt="">
            {% endif %}
            {{ ann.author.username }}
          </span>
          <span><i class="fa-regular fa-clock me-1"></i>{{ ann.created_at|timesince }} ago</span>
        </div>
        <a href="{% url 'announcement_detail' ann.pk %}" style="font-size:0.82rem; color:var(--moss); font-weight:600;">
          Read More <i class="fa-solid fa-arrow-right ms-1"></i>
        </a>
      </div>
    </article>
    {% endfor %}
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">📢</div>
    <h3 class="empty-title">No announcements yet</h3>
    <p style="color:var(--text-muted); margin-top:8px; font-size:0.92rem;">Check back soon for updates from the WildWatch team.</p>
  </div>
  {% endif %}
</div>
{% endblock %}