{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block meta %}
<meta name="description" content="{{ page_description }}">
<meta property="og:description" content="{{ page_description }}">
<meta property="twitter:description" content="{{ page_description }}">
{% endblock %}

{% block content %}
<div class="container py-4 py-lg-5">
  <div class="app-shell">
    <nav class="app-nav d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      <div class="brand-mark">
        <span class="brand-dot"></span>
        HTML Bundle to PDF
      </div>
      <div class="d-flex flex-wrap align-items-center gap-2">
        <a class="ghost-btn" href="{% url 'home' %}">Home</a>
        <a class="ghost-btn" href="{% url 'bundle_list' %}">All bundles</a>
        <a class="ghost-btn" href="/admin/">Admin</a>
      </div>
    </nav>
    <div class="p-4">
      {% if messages %}
      <div class="mb-3">
        {% for message in messages %}
        <div class="alert alert-custom" role="alert">{{ message }}</div>
        {% endfor %}
      </div>
      {% endif %}

      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
        <div>
          <h1 class="mb-1">{{ bundle.title|default:"Untitled bundle" }}</h1>
          <p class="muted-text mb-0">Created {{ bundle.created_at|date:"M d, Y · H:i" }} · {{ documents|length }} HTML files</p>
        </div>
        <a class="primary-btn" href="{% url 'bundle_download' bundle.id %}">Generate PDF</a>
      </div>

      <div class="row g-4">
        <div class="col-lg-7">
          <div class="workflow-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h2 class="section-title mb-0">Order your files</h2>
              <span class="pill">Lower number = earlier</span>
            </div>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="update_order">
              <div class="d-flex flex-column gap-3">
                {% for document in documents %}
                <div class="list-card">
                  <div class="d-flex justify-content-between align-items-start gap-2">
                    <div>
                      <div class="fw-semibold">{{ document.original_name }}</div>
                      <div class="small muted-text">{{ document.content_text|truncatechars:120 }}</div>
                    </div>
                    <div>
                      <label class="form-label small mb-1">Order</label>
                      <input class="order-input" type="number" name="order_{{ document.id }}" value="{{ document.order }}" min="1">
                    </div>
                  </div>
                </div>
                {% empty %}
                <div class="file-preview">No documents in this bundle yet.</div>
                {% endfor %}
              </div>
              <div class="d-flex flex-wrap gap-2 mt-4">
                <button class="ghost-btn" type="submit">Update order</button>
                <span class="muted-text align-self-center">Changes affect the next PDF export.</span>
              </div>
            </form>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="list-card mb-3">
            <h3 class="section-title mb-2">Export history</h3>
            {% if exports %}
            <div class="d-flex flex-column gap-3">
              {% for export in exports %}
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <div class="fw-semibold">{{ export.file_name }}</div>
                  <div class="small muted-text">{{ export.created_at|date:"M d, Y · H:i" }}</div>
                </div>
                <a class="ghost-btn" href="{% url 'export_download' export.id %}">Download</a>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="muted-text mb-0">No exports yet. Generate your first PDF to start history.</p>
            {% endif %}
          </div>
          <div class="list-card">
            <h3 class="section-title mb-2">Next steps</h3>
            <p class="muted-text mb-2">Need quick changes? Update the order and export again. The PDF is always a single, continuous document.</p>
            <a class="primary-btn" href="{% url 'bundle_download' bundle.id %}">Download PDF</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="app-footer text-center mt-4">Bundle created · Adjust order · Export anytime</div>
</div>
{% endblock %}