{% 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 'bundle_list' %}">All Bundles</a>
        <a class="ghost-btn" href="/admin/">Admin</a>
      </div>
    </nav>

    <section class="hero m-3 m-lg-4">
      <div class="row align-items-center g-4">
        <div class="col-lg-7 hero-content">
          <span class="pill">Internal doc bundler</span>
          <h1 class="mt-3">Combine multiple HTML files into a single PDF in minutes.</h1>
          <p class="mt-3">
            Upload multiple HTML files, set the order, and download one clean PDF. Built for staff who
            need to bundle text-heavy documents without manual copy/paste.
          </p>
          <div class="d-flex flex-wrap gap-2 mt-4">
            <a class="primary-btn" href="#upload">Start a bundle</a>
            <a class="ghost-btn" href="#recent">View recent exports</a>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="stat-card mb-3">
            <div class="d-flex justify-content-between">
              <span class="muted-text">Average prep time</span>
              <span class="badge-soft">Under 3 mins</span>
            </div>
            <h3 class="mt-2">Upload → reorder → export</h3>
            <p class="muted-text mb-0">One continuous PDF with clean spacing.</p>
          </div>
          <div class="file-preview">
            <strong>What gets bundled</strong>
            <div class="mt-2">Policies · Updates · Release notes · Staff memos</div>
          </div>
        </div>
      </div>
    </section>

    <section id="upload" class="m-3 m-lg-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="workflow-card">
        <div class="d-flex flex-column flex-lg-row justify-content-between gap-3">
          <div>
            <h2 class="section-title mb-2">Create a new bundle</h2>
            <p class="muted-text mb-0">Drop in your HTML files. We will keep their order and let you refine it on the next screen.</p>
          </div>
          <span class="pill">Continuous PDF output</span>
        </div>
        <form class="mt-4" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ form.non_field_errors }}
          <div class="row g-3">
            <div class="col-lg-5">
              <label class="form-label fw-semibold">{{ form.title.label }}</label>
              {{ form.title }}
              {% if form.title.errors %}
              <div class="text-danger small mt-1">{{ form.title.errors|join:", " }}</div>
              {% endif %}
            </div>
            <div class="col-lg-7">
              <label class="form-label fw-semibold">HTML files</label>
              <div class="upload-drop">
                <input type="file" name="files" class="form-control" multiple accept=".html,.htm">
                <div class="small muted-text mt-2">HTML only · We extract the text and combine it in order.</div>
              </div>
              {% if file_errors %}
              <div class="text-danger small mt-1">{{ file_errors|join:", " }}</div>
              {% endif %}
            </div>
          </div>
          <div class="d-flex flex-wrap gap-2 mt-4">
            <button type="submit" class="primary-btn">Create bundle</button>
            <span class="muted-text align-self-center">You can reorder before exporting.</span>
          </div>
        </form>
      </div>
    </section>

    <section id="recent" class="m-3 m-lg-4">
      <div class="row g-3">
        <div class="col-lg-6">
          <div class="list-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h3 class="section-title mb-0">Recent bundles</h3>
              <a class="ghost-btn" href="{% url 'bundle_list' %}">See all</a>
            </div>
            {% if bundles %}
            <div class="d-flex flex-column gap-3">
              {% for bundle in bundles %}
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <div class="fw-semibold">{{ bundle.title|default:"Untitled bundle" }}</div>
                  <div class="small muted-text">{{ bundle.created_at|date:"M d, Y · H:i" }} · {{ bundle.documents.count }} files</div>
                </div>
                <a class="ghost-btn" href="{% url 'bundle_detail' bundle.id %}">Open</a>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="muted-text mb-0">No bundles yet. Upload HTML files to create your first bundle.</p>
            {% endif %}
          </div>
        </div>
        <div class="col-lg-6">
          <div class="list-card h-100">
            <h3 class="section-title mb-3">Latest exports</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.bundle.title|default:"Untitled bundle" }}</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 see history here.</p>
            {% endif %}
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="app-footer text-center mt-4">Built for internal staff workflows · Continuous PDF output</div>
</div>
{% endblock %}