{% extends "base.html" %}
{% block title %}Brand kits · LibreSignage{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between align-items-start mb-4">
    <div><h1>Brand kits</h1><p class="text-body-secondary">Reuse locally hosted logos, fonts, and accessible colors across templates.</p></div>
    <a class="btn btn-outline-secondary" href="{{ url_for('content.templates') }}">Templates</a>
  </div>
  <form class="card card-body mb-4" method="post" action="{{ url_for('content.save_brand_kit_route') }}" enctype="multipart/form-data">
    <h2 class="h5">{{ 'Edit' if edit_kit else 'Create' }} brand kit</h2>
    {% if edit_kit %}<input type="hidden" name="kit_id" value="{{ edit_kit.id }}">{% endif %}
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label" for="name">Name</label><input class="form-control" id="name" name="name" value="{{ edit_kit.name if edit_kit else '' }}" required></div>
      <div class="col-md-2"><label class="form-label" for="primary_color">Primary</label><input class="form-control form-control-color w-100" id="primary_color" name="primary_color" type="color" value="{{ edit_kit.primary_color if edit_kit else '#0d6efd' }}"></div>
      <div class="col-md-2"><label class="form-label" for="secondary_color">Secondary</label><input class="form-control form-control-color w-100" id="secondary_color" name="secondary_color" type="color" value="{{ edit_kit.secondary_color if edit_kit else '#6c757d' }}"></div>
      <div class="col-md-2"><label class="form-label" for="text_color">Text</label><input class="form-control form-control-color w-100" id="text_color" name="text_color" type="color" value="{{ edit_kit.text_color if edit_kit else '#ffffff' }}"></div>
      <div class="col-md-4"><label class="form-label" for="logo">Logo</label><input class="form-control" id="logo" name="logo" type="file" accept=".gif,.jpeg,.jpg,.png,.webp"></div>
      <div class="col-md-4"><label class="form-label" for="heading_font">Heading font (WOFF2)</label><input class="form-control" id="heading_font" name="heading_font" type="file" accept=".woff2"></div>
      <div class="col-md-4"><label class="form-label" for="body_font">Body font (WOFF2)</label><input class="form-control" id="body_font" name="body_font" type="file" accept=".woff2"></div>
    </div>
    <div class="form-check my-3"><input class="form-check-input" id="is_default" name="is_default" type="checkbox" {% if edit_kit and edit_kit.is_default %}checked{% endif %}><label class="form-check-label" for="is_default">Default brand kit</label></div>
    <button class="btn btn-primary align-self-start" type="submit">Save brand kit</button>
  </form>
  <div class="row g-3">
    {% for kit in kits %}<div class="col-md-6"><article class="card card-body h-100 {% if kit.archived %}opacity-75{% endif %}">
      <h2 class="h5">{{ kit.name }} {% if kit.is_default %}<span class="badge text-bg-primary">Default</span>{% endif %} {% if kit.archived %}<span class="badge text-bg-secondary">Archived</span>{% endif %}</h2>
      <p class="mb-2"><span class="badge" style="background:{{ kit.primary_color }};color:{{ kit.text_color }}">Primary + text</span> <span class="badge" style="background:{{ kit.secondary_color }}">Secondary</span></p>
      <p class="text-body-secondary">{{ 'Logo' if kit.logo_filename else 'No logo' }} · {{ 'Heading font' if kit.heading_font_filename else 'Default heading font' }} · {{ 'Body font' if kit.body_font_filename else 'Default body font' }}</p>
      {% if not kit.archived %}<div class="d-flex gap-2"><a class="btn btn-sm btn-outline-primary" href="{{ url_for('content.brand_kits', edit=kit.id) }}">Edit</a><form method="post" action="{{ url_for('content.archive_brand_kit_route', kit_id=kit.id) }}"><button class="btn btn-sm btn-outline-danger" type="submit">Archive</button></form></div>{% endif %}
    </article></div>{% else %}<p>No brand kits yet.</p>{% endfor %}
  </div>
{% endblock %}