{% extends 'admin/master.html' %}

{% block body %}
<style>
/* Theme-aware via --surface-* tokens (light fallbacks). */
.fs-wrap { max-width: 880px; margin: 1.5rem auto; }
.fs-hero {
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.2rem;
    background: var(--surface-subtle, #f8f9fa);
    border: 1px solid var(--surface-border, #e2e6ea);
    color: var(--surface-text, #2c3e50);
}
.fs-hero h2 { margin: 0 0 0.35rem; }
.fs-hero p { margin: 0; color: var(--surface-muted, #6c757d); }
.fs-progress {
    height: 10px; border-radius: 6px; overflow: hidden;
    background: var(--surface-border, #e2e6ea);
    margin-top: 1rem;
}
.fs-progress > div {
    height: 100%;
    background: #27ae60;
    transition: width 0.4s ease;
}
.fs-progress-label {
    font-size: 0.85rem; margin-top: 0.4rem;
    color: var(--surface-muted, #6c757d);
}
.fs-step {
    display: flex; gap: 1rem; align-items: flex-start;
    border: 1px solid var(--surface-border, #e2e6ea);
    border-left: 4px solid #3498db;
    border-radius: 10px;
    background: var(--surface-bg, #fff);
    color: var(--surface-text, inherit);
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
}
.fs-step.fs-done { border-left-color: #27ae60; }
.fs-badge {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: bold; color: #fff; background: #3498db;
    font-family: ui-monospace, monospace;
}
.fs-done .fs-badge { background: #27ae60; }
.fs-step h5 { margin: 0 0 0.3rem; color: var(--surface-text, #2c3e50); }
.fs-done h5 { text-decoration: line-through; opacity: 0.75; }
.fs-step p { margin: 0 0 0.6rem; color: var(--surface-muted, #6c757d); }
.fs-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fs-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin: 1.2rem 0 2rem; gap: 1rem; flex-wrap: wrap;
}
</style>

<div class="fs-wrap">
  <div class="fs-hero">
    <h2><i class="fa fa-rocket"></i> Welcome to CMDBsyncer</h2>
    <p>These steps take you from an empty installation to a running,
       scheduled sync. Every step checks itself off automatically as soon
       as it is done — no matter where you did it.</p>
    <div class="fs-progress">
      <div style="width: {{ (done_count / total_count * 100) | round }}%"></div>
    </div>
    <div class="fs-progress-label">
      {{ done_count }} of {{ total_count }} steps completed
    </div>
  </div>

  {% for step in steps %}
  <div class="fs-step {% if step.done %}fs-done{% endif %}">
    <span class="fs-badge">
      {% if step.done %}<i class="fa fa-check"></i>{% else %}{{ loop.index }}{% endif %}
    </span>
    <div>
      <h5>{{ step.title }}</h5>
      <p>{{ step.description }}</p>
      <div class="fs-actions">
        {% if not step.done %}
        <a class="btn btn-primary btn-sm" href="{{ step.action[1] }}">
          {{ step.action[0] }}
        </a>
        {% else %}
        <a class="btn btn-secondary btn-sm" href="{{ step.action[1] }}">
          {{ step.action[0] }}
        </a>
        {% endif %}
        <a class="btn btn-outline-secondary btn-sm" href="{{ step.docs }}"
           target="_blank" rel="noopener">
          <i class="fa fa-book"></i> Documentation
        </a>
      </div>
    </div>
  </div>
  {% endfor %}

  <div class="fs-footer">
    <a href="{{ docs_url }}" target="_blank" rel="noopener">
      <i class="fa fa-book"></i> Full First-Steps guide in the documentation
    </a>
    {% if not dismissed %}
    <form method="POST" action="{{ url_for('.dismiss') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-outline-secondary btn-sm">
        Don't show this page on login
      </button>
    </form>
    {% else %}
    <form method="POST" action="{{ url_for('.show_again') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-outline-secondary btn-sm">
        Show this page on login again
      </button>
    </form>
    {% endif %}
  </div>
</div>
{% endblock %}