{% extends 'generic/_base.html' %}
{% block title %}{% if object.pk %}{{ object }} bearbeiten{% else %}Neues Branding-Profil{% endif %}{% endblock %}
{% block content %}
<style>
  .ce-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
  .ce-colors .form-control-color { width: 100%; height: 2.4rem; }
  .ce-logo-preview { max-height: 60px; max-width: 220px; border: 1px solid var(--tblr-border-color); border-radius: .25rem; padding: .25rem; background: #fff; }
</style>

<form method="post" enctype="multipart/form-data" class="mt-3">
  {% csrf_token %}
  {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}

  <div class="row g-3">
    <div class="col-lg-6">
      <div class="card h-100">
        <h2 class="card-header"><i class="mdi mdi-domain"></i> Allgemein</h2>
        <div class="card-body">
          {% include 'netbox_customer_export/_field.html' with field=form.name %}
          <div class="mb-3 d-flex gap-2 align-items-center">{{ form.is_default }} <label for="{{ form.is_default.id_for_label }}" class="m-0">{{ form.is_default.label }}</label>
            <small class="text-muted ms-2">{{ form.is_default.help_text }}</small></div>
          {% include 'netbox_customer_export/_field.html' with field=form.company_name %}
          {% include 'netbox_customer_export/_field.html' with field=form.footer_text %}
          <div class="mb-3">
            <label class="form-label" for="{{ form.logo.id_for_label }}">{{ form.logo.label }}</label>
            {% if object.logo %}<div class="mb-2"><img src="{{ object.logo.url }}" class="ce-logo-preview" alt="Aktuelles Logo"></div>{% endif %}
            {{ form.logo }}
            <div class="form-text">{{ form.logo.help_text }}</div>
            {% for e in form.logo.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card h-100">
        <h2 class="card-header"><i class="mdi mdi-palette"></i> Farben & Schrift</h2>
        <div class="card-body">
          <div class="ce-colors mb-3">
            {% for field in form %}{% if field.name in 'primary_color accent_color header_text_color label_bg_color stripe_color' %}
              <div>
                <label class="form-label small" for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% for e in field.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
              </div>
            {% endif %}{% endfor %}
          </div>
          <div class="row">
            <div class="col-8">{% include 'netbox_customer_export/_field.html' with field=form.font_family %}</div>
            <div class="col-4">{% include 'netbox_customer_export/_field.html' with field=form.font_size %}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12">
      <div class="card">
        <h2 class="card-header"><i class="mdi mdi-file-word-box"></i> Word & PDF</h2>
        <div class="card-body row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label" for="{{ form.docx_template.id_for_label }}">{{ form.docx_template.label }}</label>
              {{ form.docx_template }}
              <div class="form-text">{{ form.docx_template.help_text }}</div>
              {% for e in form.docx_template.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
            </div>
            {% include 'netbox_customer_export/_field.html' with field=form.docx_table_style %}
          </div>
          <div class="col-lg-6">{% include 'netbox_customer_export/_field.html' with field=form.extra_css %}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-end gap-2 mt-3">
    <a href="{% url 'plugins:netbox_customer_export:branding_list' %}" class="btn btn-outline-secondary">Abbrechen</a>
    {% if object.pk %}<a href="{% url 'plugins:netbox_customer_export:branding_preview' pk=object.pk %}" target="_blank" class="btn btn-outline-primary"><i class="mdi mdi-eye"></i> Vorschau</a>{% endif %}
    <button class="btn btn-primary"><i class="mdi mdi-content-save"></i> Speichern</button>
  </div>
</form>
{% endblock %}