{% extends 'base.html' %}
{% block title %}{{ event.title }} - EventNest{% endblock %}
{% block content %}
<div class="event-banner">
  {% if banner %}<img src="{{ banner.get_url }}" alt="{{ event.title }}">{% else %}&#127881;{% endif %}
  <div class="event-banner-badges">
    {% if event.category %}<span class="badge badge-purple">{{ event.category.title }}</span>{% endif %}
    <span class="badge {% if event.event_type == 'online' %}badge-cyan{% else %}badge-green{% endif %}">{{ event.event_type|title }}</span>
    {% if event.is_free %}<span class="badge badge-green">FREE</span>{% endif %}
  </div>
</div>

<div class="event-layout">
  <!-- Main content -->
  <div>
    <h1 class="font-head mb-3 fs-h1">{{ event.title }}</h1>
    <div class="event-meta-row">
      <span>&#128197; {{ event.start_date|date:"F d, Y, g:i A" }}</span>
      {% if event.city    %}<span>&#128205; {{ event.city }}</span>{% endif %}
      {% if event.venue   %}<span>&#127963; {{ event.venue }}</span>{% endif %}
      <span>&#128101; {{ event.tickets_sold }} registered</span>
      <span class="text-muted text-sm">By {{ event.organiser.username }}</span>
    </div>

    <div class="divider"></div>
    <div class="mb-3 event-description">{{ event.description|linebreaks }}</div>

    {% if event.address %}
    <div class="info-box mb-2">
      <div class="info-box-title">&#128205; Venue Address</div>
      <p class="text-sm text-muted">{{ event.address }}</p>
    </div>
    {% endif %}

    {% if event.online_link %}
    <div class="info-box info-box-online">
      <div class="info-box-title">&#127760; Online Event</div>
      <p class="text-sm text-muted">Link shared with registered attendees.</p>
    </div>
    {% endif %}

    <div class="text-xs text-muted mt-3">
      Created by {{ event.created_by.username|default:"-" }}
      &nbsp;&middot;&nbsp;
      Last updated {{ event.updated_at|date:"M d, Y" }}
      {% if event.updated_by %} by {{ event.updated_by.username }}{% endif %}
    </div>
  </div>

  <!-- Sidebar -->
  <div class="event-sidebar">
    <div class="card">
      <div class="card-body">
        <div class="event-price-big">
          {% if event.is_free %}FREE{% else %}&#8377;{{ event.ticket_price }}{% endif %}
        </div>

        {% if event.max_capacity > 0 %}
        <div class="mb-3">
          <div class="flex justify-between text-xs text-muted mb-1">
            <span>Availability</span>
            <span>{{ event.spots_left }} / {{ event.max_capacity }}</span>
          </div>
          <div class="avail-bar-track">
            <div class="avail-bar-fill" style="width:{% widthratio event.tickets_sold event.max_capacity 100 %}%"></div>
          </div>
        </div>
        {% endif %}

        <div class="text-sm text-muted mb-3 flex flex-col gap-1">
          <span>&#128197; Ends {{ event.end_date|date:"M d, Y" }}</span>
          <span>&#128101; {{ event.tickets_sold }} registered</span>
        </div>

        {% if user.is_authenticated %}
          {% if user_ticket %}
            <div class="registered-box">
              <div class="registered-box-title">&#10003; You&apos;re Registered!</div>
              <div class="registered-box-code">{{ user_ticket.ticket_code }}</div>
            </div>
          {% elif event.spots_left == 0 %}
            <button class="btn btn-outline btn-w-full" disabled>Fully Booked</button>
          {% elif not event.is_upcoming %}
            <button class="btn btn-outline btn-w-full" disabled>Event Ended</button>
          {% else %}
            <form method="post" action="{% url 'web_events:register_event' event.slug %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-gradient btn-w-full">
                {% if event.is_free %}Register Free{% else %}Get Ticket - &#8377;{{ event.ticket_price }}{% endif %}
              </button>
            </form>
          {% endif %}
        {% else %}
          <a href="{% url 'accounts:login' %}?next={{ request.path }}" class="btn btn-gradient btn-w-full">Login to Register</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}