{% extends "base.html" %}

{% block title %}{{ brief.title }} · Install blueprint{% endblock %}
{% block meta_description %}Review the generated Postiz install blueprint for {{ brief.title }}, including prerequisite readiness, env placeholders, and bootstrap commands.{% endblock %}

{% block content %}
<section class="inner-hero py-5">
  <div class="row g-4 align-items-center">
    <div class="col-lg-7">
      <div class="eyebrow-chip">Install blueprint</div>
      <h1 class="page-title mt-3">{{ brief.title }}</h1>
      <p class="hero-copy mt-3">{{ brief.next_milestone }}</p>
      <div class="d-flex flex-wrap gap-3 mt-4">
        <span class="status-pill status-{{ brief.status_tone }}">{{ brief.status_label }}</span>
        <span class="info-chip">{{ brief.public_url }}</span>
        <span class="info-chip">{{ brief.node_version }} · {{ brief.package_manager }}</span>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="glass-panel summary-card h-100">
        <div class="panel-label">Readiness</div>
        <div class="readiness-ring progress-{{ brief.ready_services_count }} mt-3">
          <div class="readiness-ring-inner">
            <strong>{{ brief.readiness_percent }}%</strong>
            <span>service readiness</span>
          </div>
        </div>
        <p class="hero-copy small mt-4 mb-0">{{ brief.ready_services_count }} of 3 prerequisite services are marked ready for the initial development boot.</p>
      </div>
    </div>
  </div>
</section>

<section class="row g-4 pb-5">
  <div class="col-xl-5">
    <div class="glass-panel section-panel h-100">
      <div class="section-heading-wrap">
        <div>
          <span class="section-kicker">Prerequisites</span>
          <h2 class="section-title">Service checklist</h2>
        </div>
      </div>
      <div class="checklist-grid mt-4">
        {% for item in blueprint.prerequisites %}
        <article class="checklist-item {% if item.ready %}is-ready{% endif %}">
          <div class="checklist-dot"></div>
          <div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.detail }}</p>
          </div>
        </article>
        {% endfor %}
      </div>
      {% if brief.notes %}
      <div class="note-panel mt-4">
        <span class="section-kicker">Notes</span>
        <p class="mb-0 mt-2">{{ brief.notes }}</p>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="col-xl-7">
    <div class="glass-panel section-panel mb-4">
      <div class="section-heading-wrap">
        <div>
          <span class="section-kicker">Environment</span>
          <h2 class="section-title">Suggested .env starting point</h2>
        </div>
      </div>
      <div class="code-panel mt-4">
        <code>{% for line in blueprint.env_lines %}{{ line }}{% if not forloop.last %}<br>{% endif %}{% endfor %}</code>
      </div>
    </div>
    <div class="glass-panel section-panel">
      <div class="section-heading-wrap">
        <div>
          <span class="section-kicker">Bootstrap</span>
          <h2 class="section-title">Suggested command path</h2>
        </div>
        <a class="text-link" href="{% url 'brief_list' %}">Back to briefs</a>
      </div>
      <div class="command-list mt-4">
        {% for command in blueprint.command_plan %}
        <div class="command-row">
          <span class="command-index">0{{ forloop.counter }}</span>
          <code>{{ command }}</code>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
{% endblock %}