{% extends "base.html" %}

{% block title %}Install briefs · Postiz Native Setup Studio{% endblock %}
{% block meta_description %}Browse saved Postiz install briefs, compare service readiness, and reopen any setup blueprint for this VM.{% endblock %}

{% block content %}
<section class="inner-hero py-5 pb-4">
  <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3">
    <div>
      <div class="eyebrow-chip">Install briefs</div>
      <h1 class="page-title mt-3">Saved setup plans for this hosted environment.</h1>
      <p class="hero-copy mt-3">Every brief keeps the public URL, infrastructure readiness, and next milestone visible so you can iterate without losing context.</p>
    </div>
    <a class="btn btn-highlight btn-lg" href="{% url 'brief_create' %}">Create another brief</a>
  </div>
</section>

<section class="pb-5">
  {% if briefs %}
  <div class="row g-4">
    {% for brief in briefs %}
    <div class="col-lg-6 col-xl-4">
      <article class="glass-panel brief-card h-100">
        <div class="d-flex justify-content-between align-items-start gap-3">
          <div>
            <h2 class="card-title">{{ brief.title }}</h2>
            <p class="card-subtitle">{{ brief.public_url }}</p>
          </div>
          <span class="status-pill status-{{ brief.status_tone }}">{{ brief.status_label }}</span>
        </div>
        <div class="progress-track progress-{{ brief.ready_services_count }} mt-4"><span></span></div>
        <div class="progress-copy mt-2">{{ brief.ready_services_count }}/3 infrastructure services ready</div>
        <ul class="detail-list mt-4">
          <li><span>Node</span><strong>{{ brief.node_version }}</strong></li>
          <li><span>Package manager</span><strong>{{ brief.package_manager }}</strong></li>
          <li><span>Email</span><strong>{{ brief.get_email_provider_display }}</strong></li>
        </ul>
        <p class="next-copy mt-4">{{ brief.next_milestone }}</p>
        <a class="btn btn-outline-light mt-4" href="{% url 'brief_detail' brief.pk %}">Open blueprint</a>
      </article>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-card text-center py-5">
    <h2>No install briefs yet</h2>
    <p>Start with one brief so the app can generate the first Postiz setup blueprint for this VM.</p>
    <a class="btn btn-highlight" href="{% url 'brief_create' %}">Create the first brief</a>
  </div>
  {% endif %}
</section>
{% endblock %}