{% extends "cms/base.html" %}
{% block title %}{% if obj.pk %}Edit Brand{% else %}Add Brand{% endif %}{% endblock %}
{% block page_title %}{% if obj.pk %}{{ obj.name }}{% else %}Add Brand{% endif %}{% endblock %}

{% block cms_content %}
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}

  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div class="section-head"><span><i class="fa-solid fa-shapes me-2"></i>Brand</span></div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td class="field-label">Name</td>
          <td class="field-td"><input type="text" name="name" value="{{ obj.name }}" class="field-input" required></td>
        </tr>
        <tr>
          <td class="field-label">Path</td>
          <td class="field-td">
            <input type="text" name="slug" value="{{ obj.slug }}" placeholder="events" class="field-input" style="font-family:monospace">
            <div style="color:var(--cms-muted);font-size:.72rem;margin-top:.35rem">
              The brand is served here, so "events" gives /events/. Leave blank to build it from the name. It cannot be a path the site already uses, such as contact or services.
            </div>
          </td>
        </tr>
        <tr>
          <td class="field-label">Tagline</td>
          <td class="field-td"><input type="text" name="tagline" value="{{ obj.tagline }}" class="field-input"></td>
        </tr>
        <tr>
          <td class="field-label top">Intro</td>
          <td class="field-td">
            <textarea name="intro" rows="3" class="field-input" style="resize:vertical">{{ obj.intro }}</textarea>
            <div style="color:var(--cms-muted);font-size:.72rem;margin-top:.35rem">
              Short summary, used on cards and the brands index.
            </div>
          </td>
        </tr>
        <tr>
          <td class="field-label top">Body</td>
          <td class="field-td"><textarea name="body" rows="10" class="field-input" style="resize:vertical">{{ obj.body }}</textarea></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div class="section-head"><span><i class="fa-solid fa-palette me-2"></i>Look</span></div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td class="field-label">Logo</td>
          <td class="field-td">
            {% if obj.logo %}
            <div style="margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem">
              <img src="{{ obj.logo.url }}" alt="" style="height:34px;width:auto">
              <label style="font-size:.78rem;color:var(--cms-muted)">
                <input type="checkbox" name="clear_logo" value="1"> remove
              </label>
            </div>
            {% endif %}
            <input type="file" name="logo" accept="image/*" class="field-input">
          </td>
        </tr>
        <tr>
          <td class="field-label">Hero image</td>
          <td class="field-td">
            {% if obj.hero %}
            <div style="margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem">
              <img src="{{ obj.hero.url }}" alt="" style="height:52px;width:auto;border-radius:6px">
              <label style="font-size:.78rem;color:var(--cms-muted)">
                <input type="checkbox" name="clear_hero" value="1"> remove
              </label>
            </div>
            {% endif %}
            <input type="file" name="hero" accept="image/*" class="field-input">
          </td>
        </tr>
        <tr>
          <td class="field-label">Accent colour</td>
          <td class="field-td">
            <input type="text" name="accent_colour" value="{{ obj.accent_colour }}" placeholder="#f06820" class="field-input" style="font-family:monospace;max-width:180px">
            <div style="color:var(--cms-muted);font-size:.72rem;margin-top:.35rem">
              Leave blank to use the site's own accent.
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div class="section-head"><span><i class="fa-solid fa-magnifying-glass-chart me-2"></i>SEO &amp; Placement</span></div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td class="field-label top">Meta Description</td>
          <td class="field-td"><textarea name="meta_description" rows="2" class="field-input" style="resize:vertical">{{ obj.meta_description }}</textarea></td>
        </tr>
        <tr>
          <td class="field-label top">Meta Keywords</td>
          <td class="field-td"><textarea name="meta_keywords" rows="2" class="field-input" style="resize:vertical">{{ obj.meta_keywords }}</textarea></td>
        </tr>
        <tr>
          <td class="field-label">Redirects from</td>
          <td class="field-td">
            <input type="text" name="external_domain" value="{{ obj.external_domain }}" placeholder="hpevents.uk" class="field-input" style="font-family:monospace">
            <div style="color:var(--cms-muted);font-size:.72rem;margin-top:.35rem">
              Recorded here so the list lives in one place. The redirect itself is set up at the DNS provider, not by this field.
            </div>
          </td>
        </tr>
        <tr>
          <td class="field-label">Order</td>
          <td class="field-td"><input type="number" name="order" value="{{ obj.order|default:99 }}" class="field-input" style="max-width:120px"></td>
        </tr>
        <tr>
          <td class="field-label">Live</td>
          <td class="field-td">
            <label style="font-size:.85rem">
              <input type="checkbox" name="is_active" value="1"{% if obj.is_active or not obj.pk %} checked{% endif %}> visible on the site
            </label>
          </td>
        </tr>
        <tr>
          <td class="field-label">Homepage</td>
          <td class="field-td">
            <label style="font-size:.85rem">
              <input type="checkbox" name="show_on_home" value="1"{% if obj.show_on_home or not obj.pk %} checked{% endif %}> include in the brands row
            </label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div style="display:flex;gap:.75rem;align-items:center">
    <button type="submit" class="btn-primary" style="padding:.6rem 1.5rem;border-radius:7px;border:none;cursor:pointer">Save</button>
    <a href="{% url 'cms_brands' %}" style="color:var(--cms-muted);text-decoration:none;font-size:.85rem">Cancel</a>
  </div>
</form>
{% endblock %}