{% extends "base.html" %}

{% block title %}Templates — karyab{% endblock %}

{% block content %}
<h1>CV Templates</h1>

{% if flash %}
{% if flash_error %}
<div class="flash-banner flash-error" style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% else %}
<div class="flash-banner" style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;color:#065f46;border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% endif %}
{% endif %}

<h2>Available Templates</h2>
<div class="templates-gallery" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:1rem">
  {% for tmpl in templates_list %}
  <div class="template-card" style="border:1px solid var(--border,#e5e7eb);border-radius:8px;padding:1rem">
    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem">
      <strong>{{ tmpl.name }}</strong>
      {% if tmpl.id == default_template_id %}
      <span class="default-marker" title="Current default" style="color:#ca8a04;font-size:0.8rem">&#9733; default</span>
      {% endif %}
    </div>
    <div style="font-size:0.75rem;color:var(--fg-muted,#666);margin-bottom:0.5rem">
      {{ tmpl.kind }}{% if tmpl.description %} — {{ tmpl.description }}{% endif %}
    </div>
    <div style="display:flex;gap:0.5rem;flex-wrap:wrap">
      {% if tmpl.id != default_template_id %}
      <form method="post" action="/templates/default" style="display:inline">
        <input type="hidden" name="template_id" value="{{ tmpl.id }}">
        <button type="submit" class="btn btn-sm" style="font-size:0.8rem;padding:0.25rem 0.6rem">Set default</button>
      </form>
      {% endif %}
      <form method="post" action="/templates/preview" style="display:inline">
        <input type="hidden" name="template_id" value="{{ tmpl.id }}">
        <button type="submit" class="btn btn-sm" style="font-size:0.8rem;padding:0.25rem 0.6rem">Render preview</button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>

<h2 style="margin-top:2rem">Custom Template Slots</h2>
<div style="display:grid;gap:0.5rem;margin-top:0.75rem">
  {% for slot in custom_slots %}
  <div class="custom-slot" style="display:flex;align-items:center;gap:1rem;padding:0.5rem 0.75rem;border:1px solid var(--border,#e5e7eb);border-radius:6px">
    <span style="font-weight:500;min-width:7rem">{{ slot.name }}</span>
    <span style="font-size:0.75rem;color:var(--fg-muted,#666)">
      {% if slot.present %}present{% else %}empty{% endif %}
    </span>
    <a href="#editor-{{ slot.id }}" style="font-size:0.85rem">
      {% if slot.present %}Edit{% else %}New{% endif %}
    </a>
  </div>
  {% endfor %}
</div>

<h2 style="margin-top:2rem" id="slot-editor">Slot Editor</h2>
<form method="post" action="/templates/custom/save" style="max-width:36rem;display:grid;gap:1rem;margin-top:1rem">
  <div class="filter-group">
    <label for="slot">Slot (1–5)</label>
    <input type="number" id="slot" name="slot" min="1" max="5" value="1" style="width:5rem">
  </div>
  <div class="filter-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" style="width:100%">
  </div>
  <div class="filter-group">
    <label for="source">Typst source</label>
    <textarea id="source" name="source" rows="12" style="width:100%;font-family:monospace;font-size:0.85rem;resize:vertical"></textarea>
  </div>
  <div>
    <button type="submit" class="btn btn-primary">Save slot</button>
  </div>
</form>
{% endblock %}