{% extends "layouts/base.html" %}
{% load static %}

{% block title %}Jingle Templates - Stream Processor{% endblock %}

{% block content %}
<div class="py-4 bg-light min-vh-100">
  <div class="container-fluid" style="max-width: 1200px;">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
      <div>
        <h1 class="h3 fw-bold text-dark mb-1">Jingle Templates</h1>
        <p class="text-muted mb-0">Manage reference templates for jingle detection in stream content</p>
      </div>
      <div class="d-flex gap-2">
        <a href="{% url 'jingles:detection_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-search me-2"></i> Detections
        </a>
        <a href="{% url 'jingles:adbreak_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-play-circle me-2"></i> Ad Breaks
        </a>
        <a href="{% url 'jingles:template_create' %}" class="btn btn-primary">
          <i class="fas fa-plus me-2"></i> Add Template
        </a>
      </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-primary d-flex align-items-start mb-4" role="alert">
      <i class="fas fa-info-circle me-3 fs-5"></i>
      <div>
        <h6 class="mb-1">About Jingle Templates</h6>
        <div class="small">
          Jingle templates are reference images used by the AI system to identify specific jingles in stream content. Each template includes similarity thresholds, categories, and metadata for accurate detection.
        </div>
      </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row row-cols-1 row-cols-md-4 g-3 mb-4">
      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-image text-primary fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Total Templates</div>
                <div class="fs-5 fw-semibold">{{ templates|length|default:0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-check-circle text-success fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Active</div>
                <div class="fs-5 fw-semibold">
                  {% for template in templates %}{% if template.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-tags text-warning fs-4"></i>
              <div class="ms-3">
                <div class="small text-muted">Categories</div>
                <div class="fs-5 fw-semibold">
                  {% regroup templates by category as template_groups %}
                  {{ template_groups|length|default:0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <i class="fas fa-user fs-4" style="color:#7c3aed;"></i>
              <div class="ms-3">
                <div class="small text-muted">Contributors</div>
                <div class="fs-5 fw-semibold">
                  {% regroup templates by created_by as user_groups %}
                  {{ user_groups|length|default:0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Search & Filters -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">Search & Filters</h6>
      </div>
      <div class="card-body">
        <form method="get">
          <div class="row g-3">
            <div class="col-12 col-md-8">
              <label for="search" class="form-label small fw-semibold">Search</label>
              <div class="position-relative">
                <input type="text" 
                       name="search" 
                       id="search" 
                       value="{{ search }}" 
                       placeholder="Search by name, description, or category..." 
                       class="form-control"
                       hx-get="{% url 'jingles:template_list' %}"
                       hx-trigger="keyup changed delay:500ms"
                       hx-target="#templates-grid"
                       hx-indicator="#search-spinner">
                <div id="search-spinner" class="htmx-indicator position-absolute top-50 end-0 translate-middle-y me-2">
                  <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-2">
              <label for="category" class="form-label small fw-semibold">Category</label>
              <select name="category" id="category" class="form-select">
                <option value="">All Categories</option>
                <option value="ad_start" {% if request.GET.category == "ad_start" %}selected{% endif %}>Advertisement Start</option>
                <option value="ad_end" {% if request.GET.category == "ad_end" %}selected{% endif %}>Advertisement End</option>
                <option value="program_start" {% if request.GET.category == "program_start" %}selected{% endif %}>Program Start</option>
                <option value="program_end" {% if request.GET.category == "program_end" %}selected{% endif %}>Program End</option>
                <option value="transition" {% if request.GET.category == "transition" %}selected{% endif %}>Transition</option>
                <option value="branding" {% if request.GET.category == "branding" %}selected{% endif %}>Channel Branding</option>
                <option value="other" {% if request.GET.category == "other" %}selected{% endif %}>Other</option>
              </select>
            </div>
            <div class="col-12 col-md-2">
              <label for="status" class="form-label small fw-semibold">Status</label>
              <select name="status" id="status" class="form-select">
                <option value="">All Templates</option>
                <option value="active" {% if request.GET.status == "active" %}selected{% endif %}>Active Only</option>
                <option value="inactive" {% if request.GET.status == "inactive" %}selected{% endif %}>Inactive Only</option>
              </select>
            </div>
          </div>
          <div class="d-flex justify-content-end gap-2 mt-3">
            <a href="{% url 'jingles:template_list' %}" class="btn btn-outline-secondary">Clear Filters</a>
            <button type="submit" class="btn btn-primary">Apply Filters</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Templates Grid -->
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h6 class="mb-0">Template Library</h6>
      </div>

      {% if templates %}
        <div class="p-3">
          <div id="templates-grid" class="row g-3" hx-ext="loading-states">
            {% for template in templates %}
              <div class="col-12 col-md-6 col-lg-4">
                <div class="card h-100 border-0 shadow-sm">
                  <!-- Template Image / Placeholder -->
                  <div class="ratio ratio-16x9 bg-light rounded-top">
                    {% if template.image_path %}
                      <img src="{{ MEDIA_URL }}{{ template.image_path }}" 
                           alt="{{ template.name }}" 
                           class="img-fluid rounded-top w-100 h-100" 
                           style="object-fit: cover;"
                           onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                      <div class="d-flex align-items-center justify-content-center rounded-top" style="background:linear-gradient(135deg,#eff6ff,#e0e7ff); display: none;">
                        <i class="fas fa-image fs-2 text-primary"></i>
                      </div>
                    {% else %}
                      <div class="d-flex align-items-center justify-content-center rounded-top">
                        <i class="fas fa-image fs-2 text-muted"></i>
                      </div>
                    {% endif %}
                  </div>

                  <!-- Body -->
                  <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                      <div class="me-2">
                        <h5 class="card-title h6 mb-1 text-truncate">{{ template.name }}</h5>
                        <div class="text-muted small">{{ template.slug }}</div>
                      </div>
                      <div>
                        {% if template.is_active %}
                          <span class="badge rounded-pill bg-success-subtle text-success">
                            <i class="fas fa-check-circle me-1"></i> Active
                          </span>
                        {% else %}
                          <span class="badge rounded-pill bg-secondary-subtle text-secondary">
                            <i class="fas fa-pause-circle me-1"></i> Inactive
                          </span>
                        {% endif %}
                      </div>
                    </div>

                    {% if template.description %}
                      <p class="text-muted small mt-2 mb-0" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                        {{ template.description|truncatewords:20 }}
                      </p>
                    {% endif %}

                    <hr class="my-3">

                    <div class="d-flex flex-column gap-1 small">
                      <div class="d-flex justify-content-between">
                        <span class="text-muted">Channel:</span>
                        <span class="badge rounded-pill bg-info-subtle text-info">{{ template.channel.name|default:"No Channel" }}</span>
                      </div>
                      <div class="d-flex justify-content-between">
                        <span class="text-muted">Category:</span>
                        <span class="badge rounded-pill bg-primary-subtle text-primary">{{ template.get_category_display }}</span>
                      </div>
                      <div class="d-flex justify-content-between">
                        <span class="text-muted">Threshold:</span>
                        <span class="fw-semibold">{{ template.similarity_threshold|floatformat:3 }}</span>
                      </div>
                      <div class="d-flex justify-content-between">
                        <span class="text-muted">Created:</span>
                        <span>{{ template.created_at|date:"M d, Y" }}</span>
                      </div>
                      <div class="d-flex justify-content-between">
                        <span class="text-muted">By:</span>
                        <span>{{ template.created_by.username }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- Enhanced Actions -->
                  <div class="card-footer bg-white d-flex align-items-center justify-content-between">
                    <div class="d-inline-flex gap-2">
                      <a href="{% url 'jingles:template_detail' template.id %}" 
                         class="text-primary text-decoration-none" 
                         title="View Details"
                         hx-get="{% url 'jingles:template_detail' template.id %}"
                         hx-target="#main-content"
                         hx-push-url="true">
                        <i class="fas fa-eye"></i>
                        <span class="htmx-indicator ms-1">
                          <div class="spinner-border spinner-border-sm" role="status"></div>
                        </span>
                      </a>
                      <a href="{% url 'jingles:template_edit' template.id %}" 
                         class="text-success text-decoration-none" 
                         title="Edit Template"
                         hx-get="{% url 'jingles:template_edit' template.id %}"
                         hx-target="#main-content"
                         hx-push-url="true">
                        <i class="fas fa-edit"></i>
                        <span class="htmx-indicator ms-1">
                          <div class="spinner-border spinner-border-sm" role="status"></div>
                        </span>
                      </a>
                      {% if template.is_active %}
                        <button class="btn btn-link p-0 text-warning text-decoration-none" 
                                title="Deactivate"
                                hx-patch="{% url 'jingles:template_toggle' template.id %}"
                                hx-target="closest .card"
                                hx-swap="outerHTML">
                          <i class="fas fa-pause"></i>
                          <span class="htmx-indicator ms-1">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                          </span>
                        </button>
                      {% else %}
                        <button class="btn btn-link p-0 text-success text-decoration-none" 
                                title="Activate"
                                hx-patch="{% url 'jingles:template_toggle' template.id %}"
                                hx-target="closest .card"
                                hx-swap="outerHTML">
                          <i class="fas fa-play"></i>
                          <span class="htmx-indicator ms-1">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                          </span>
                        </button>
                      {% endif %}
                      <button class="btn btn-link p-0 text-danger text-decoration-none" 
                              title="Delete"
                              hx-delete="{% url 'jingles:template_delete' template.id %}"
                              hx-confirm="Are you sure you want to delete '{{ template.name }}'?"
                              hx-target="closest .col-12"
                              hx-swap="outerHTML swap:1s">
                        <i class="fas fa-trash"></i>
                        <span class="htmx-indicator ms-1">
                          <div class="spinner-border spinner-border-sm" role="status"></div>
                        </span>
                      </button>
                    </div>
                    <a href="{% url 'jingles:detection_list' %}?template={{ template.id }}" 
                       class="small text-primary text-decoration-none"
                       hx-get="{% url 'jingles:detection_list' %}?template={{ template.id }}"
                       hx-target="#main-content"
                       hx-push-url="true">
                      View Detections
                      <span class="htmx-indicator ms-1">
                        <div class="spinner-border spinner-border-sm" role="status"></div>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>

        <!-- Pagination -->
        {% if is_paginated %}
          <div class="card-footer bg-white d-flex flex-column flex-sm-row align-items-center justify-content-between">
            <div class="small text-muted mb-2 mb-sm-0">
              Showing <span class="fw-semibold">{{ page_obj.start_index }}</span> to
              <span class="fw-semibold">{{ page_obj.end_index }}</span> of
              <span class="fw-semibold">{{ page_obj.paginator.count }}</span> results
            </div>
            <nav aria-label="Pagination">
              <ul class="pagination mb-0">
                {% if page_obj.has_previous %}
                  <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                  {% if page_obj.number == num %}
                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                  {% else %}
                    <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                  {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                  <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                {% endif %}
              </ul>
            </nav>
          </div>
        {% endif %}
      {% else %}
        <div class="text-center py-5">
          <i class="fas fa-image fs-1 text-muted mb-3"></i>
          <h5 class="fw-semibold mb-2">No Templates Found</h5>
          <p class="text-muted mb-4">No jingle templates have been created yet. Start by adding your first template.</p>
          <a href="{% url 'jingles:template_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i> Add First Template
          </a>
        </div>
      {% endif %}
    </div>

  </div>
</div>
{% endblock %}