{% extends "base.html" %}

{% block title %}Postiz Native Setup Studio · Overview{% endblock %}
{% block meta_description %}Design the first native Postiz install plan for this VM, track service readiness, and jump into the next development steps from one polished landing page.{% endblock %}

{% block content %}
<section class="hero-section py-5 py-lg-6">
  <div class="row align-items-center g-5">
    <div class="col-lg-7">
      <div class="eyebrow-chip">Hosted Postiz development workflow</div>
      <h1 class="display-title mt-3">Plan a native Postiz development install without losing sight of the public URL, services, or next commands.</h1>
      <p class="hero-copy mt-4">This first slice turns the blank starter into a Postiz setup cockpit: a polished landing page, install brief workflow, generated prerequisite summary, and a detail view you can revisit while you wire the VM.</p>
      <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
        <a class="btn btn-highlight btn-lg" href="{% url 'brief_create' %}">Create install brief</a>
        <a class="btn btn-outline-light btn-lg" href="{% url 'brief_list' %}">View install briefs</a>
      </div>
      <div class="metric-row mt-5">
        <article class="metric-card">
          <span class="metric-value">{{ brief_stats.total }}</span>
          <span class="metric-label">Saved briefs</span>
        </article>
        <article class="metric-card">
          <span class="metric-value">{{ brief_stats.ready }}</span>
          <span class="metric-label">Ready to bootstrap</span>
        </article>
        <article class="metric-card">
          <span class="metric-value">3</span>
          <span class="metric-label">Core services tracked</span>
        </article>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="glass-panel hero-panel p-4 p-xl-5">
        <div class="panel-label">First delivery included</div>
        <div class="stack-preview mt-3">
          <div class="stack-preview-card">
            <span class="stack-title">Runtime</span>
            <strong>Node 18+</strong>
            <p>Choose the Node target and package manager before the repo bootstrap.</p>
          </div>
          <div class="stack-preview-card">
            <span class="stack-title">Local services</span>
            <strong>Postgres · Redis · Temporal</strong>
            <p>Mark what is already available on the VM and see the gaps instantly.</p>
          </div>
          <div class="stack-preview-card">
            <span class="stack-title">Public entrypoint</span>
            <strong>Reverse-proxied URL</strong>
            <p>Keep the exposed hostname visible in every install brief and detail page.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="row g-4 align-items-stretch pb-5">
  <div class="col-xl-7">
    <div class="glass-panel section-panel h-100">
      <div class="section-heading-wrap">
        <div>
          <span class="section-kicker">Workflow</span>
          <h2 class="section-title">How the thin slice works</h2>
        </div>
      </div>
      <div class="roadmap-grid mt-4">
        {% for step in setup_steps %}
        <article class="roadmap-card">
          <span class="roadmap-index">0{{ forloop.counter }}</span>
          <h3>{{ step.title }}</h3>
          <p>{{ step.description }}</p>
        </article>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="col-xl-5">
    <div class="glass-panel section-panel h-100">
      <div class="section-heading-wrap">
        <div>
          <span class="section-kicker">Recent activity</span>
          <h2 class="section-title">Install brief snapshot</h2>
        </div>
        <a class="text-link" href="{% url 'brief_list' %}">See all</a>
      </div>
      {% if recent_briefs %}
      <div class="brief-list-preview mt-4">
        {% for brief in recent_briefs %}
        <a class="brief-preview-card" href="{% url 'brief_detail' brief.pk %}">
          <div class="d-flex justify-content-between align-items-start gap-3">
            <div>
              <h3>{{ brief.title }}</h3>
              <p>{{ 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-3"><span></span></div>
          <div class="progress-copy mt-2">{{ brief.readiness_percent }}% of required services marked ready</div>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-card mt-4">
        <h3>No install briefs yet</h3>
        <p>Create the first brief to generate a hosted Postiz setup blueprint for this machine.</p>
        <a class="btn btn-highlight" href="{% url 'brief_create' %}">Start the first brief</a>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}