{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <style>
    .branding-theme-card {
      border: 1px solid var(--pipelet-card-border, rgba(148, 163, 184, 0.35));
      border-radius: 16px;
      padding: 1.5rem;
      height: 100%;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.96);
    }

    .docs.dark-edition .branding-theme-card {
      background: rgba(15, 23, 42, 0.92);
      border-color: rgba(148, 163, 184, 0.3);
      box-shadow: 0 20px 40px rgba(2, 6, 23, 0.65);
    }

    .branding-theme-card.is-active {
      border-color: var(--pipelet-btn-start, #ea580c);
      box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
    }

    .branding-theme-card.is-collapsed .branding-theme-content {
      display: none;
    }

    .branding-theme-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .branding-theme-chip {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      color: rgba(15, 23, 42, 0.75);
    }

    .docs.dark-edition .branding-theme-chip {
      color: rgba(226, 232, 240, 0.8);
    }

    .branding-card-toggle {
      background: transparent;
      border: none;
      padding: 6px;
      border-radius: 8px;
      color: rgba(15, 23, 42, 0.8);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    .branding-card-toggle:hover,
    .branding-card-toggle:focus {
      background: rgba(15, 23, 42, 0.06);
      color: rgba(15, 23, 42, 1);
      transform: translateY(-1px);
    }

    .docs.dark-edition .branding-card-toggle {
      color: rgba(226, 232, 240, 0.85);
    }

    .docs.dark-edition .branding-card-toggle:hover,
    .docs.dark-edition .branding-card-toggle:focus {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 1);
    }

    .branding-card-toggle-icon {
      transition: transform 0.2s ease;
    }

    .branding-theme-card:not(.is-collapsed) .branding-card-toggle-icon {
      transform: rotate(180deg);
    }

    .branding-theme-swatches {
      display: grid;
      gap: 1rem;
    }

    .branding-theme-swatch-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.75rem;
    }

    .branding-theme-swatch {
      border-radius: 12px;
      padding: 0.65rem;
      border: 1px solid rgba(15, 23, 42, 0.08);
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-size: 0.85rem;
    }

    .branding-theme-swatch-color {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, 0.15);
      flex-shrink: 0;
    }

    .docs.dark-edition .branding-theme-swatch {
      border-color: rgba(148, 163, 184, 0.3);
    }

    .branding-theme-actions {
      margin-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .branding-theme-status {
      font-size: 0.85rem;
      font-weight: 600;
      color: rgba(15, 23, 42, 0.75);
    }

    .docs.dark-edition .branding-theme-status {
      color: rgba(226, 232, 240, 0.75);
    }
  </style>
  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">
      {{ _('Branding') }}
    </h1>
  </div>

  {% if message %}
  <div class="alert alert-success" role="alert" style="margin-top: 20px;">
    {{ message }}
  </div>
  {% endif %}

  {% if error %}
  <div class="alert alert-danger" role="alert" style="margin-top: 20px;">
    {{ error }}
  </div>
  {% endif %}

  {% set light_mode_label = _('Light mode') %}
  {% set dark_mode_label = _('Dark mode') %}

  <div class="card" style="margin-top:20px; padding:20px;">
    <h2 class="text-lg" style="margin-bottom: 0.5rem;">{{ _('Color Themes') }}</h2>
    <p class="text-sm text-secondary" style="margin-bottom: 1.25rem;">
      {{ _('Choose between the classic color theme and the new enterprise variant.') }}
    </p>
    <div class="row g-4">
      {% for scheme in color_schemes %}
      {% set scheme_id = scheme.id|replace(' ', '-') %}
      {% set content_id = 'branding-theme-content-' ~ scheme_id %}
      <div class="col-12 col-xl-6">
        <div class="branding-theme-card{% if scheme.id == current_color_scheme %} is-active{% endif %}">
          <div class="branding-theme-header">
            <div>
              <h3 class="h5" style="margin-bottom: 0.25rem;">{{ _(scheme.label) }}</h3>
              <p class="text-sm text-secondary" style="margin-bottom: 0;">{{ _(scheme.description) }}</p>
            </div>
            <div style="display: inline-flex; align-items: center; gap: 0.35rem;">
              <span class="branding-theme-chip">{{ _(scheme.label) }}</span>
              <button
                class="branding-card-toggle"
                type="button"
                aria-expanded="false"
                aria-controls="{{ content_id }}"
                aria-label="{{ _('Toggle details for {scheme_label}', scheme_label=_(scheme.label)) }}"
                title="{{ _('Show details') }}">
                <svg class="branding-card-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </button>
            </div>
          </div>
          <div class="branding-theme-content" id="{{ content_id }}" aria-hidden="false">
            <div class="branding-theme-swatches">
              <div>
                <p class="text-xs text-secondary" style="text-transform: uppercase; letter-spacing: 0.08em;">{{ _('Light') }}</p>
                <div class="branding-theme-swatch-list">
                  {% for color in scheme.light_palette %}
                  <div class="branding-theme-swatch">
                    <span class="branding-theme-swatch-color" style="background: {{ color.value }}"></span>
                    <div>
                      <div style="font-weight:600; font-size:0.8rem;">{{ color.label }}</div>
                      <div style="font-size:0.75rem; opacity:0.8;">{{ color.value }}</div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
              {% if scheme.dark_palette %}
              <div>
                <p class="text-xs text-secondary" style="text-transform: uppercase; letter-spacing: 0.08em;">{{ _('Dark') }}</p>
                <div class="branding-theme-swatch-list">
                  {% for color in scheme.dark_palette %}
                  <div class="branding-theme-swatch">
                    <span class="branding-theme-swatch-color" style="background: {{ color.value }}"></span>
                    <div>
                      <div style="font-weight:600; font-size:0.8rem;">{{ color.label }}</div>
                      <div style="font-size:0.75rem; opacity:0.8;">{{ color.value }}</div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>
            <div class="branding-theme-actions">
              <span class="branding-theme-status">
                {% if scheme.id == current_color_scheme %}
                  {{ _('Active theme') }}
                {% else %}
                  {{ _('Ready to activate') }}
                {% endif %}
              </span>
              <form method="post">
                <input type="hidden" name="action" value="set_theme">
                <input type="hidden" name="color_scheme" value="{{ scheme.id }}">
                <button class="btn btn-primary btn-sm pipelet-btn" type="submit" {% if scheme.id == current_color_scheme %}disabled{% endif %}>
                  {% if scheme.id == current_color_scheme %}
                    {{ _('Active') }}
                  {% else %}
                    {{ _('Select theme') }}
                  {% endif %}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="card" style="margin-top:20px; padding:20px;">
    <h2 class="text-lg">{{ _('Dashboard logos') }}</h2>
    <p class="text-sm text-secondary" style="margin-bottom: 1.5rem;">
      {{ _('Upload separate logos for light and dark modes. Supported formats: PNG, JPG, GIF, SVG or WEBP. Maximum file size: {size_kb} KB.', size_kb=(max_file_size // 1024)) }}
    </p>

    <div class="row g-4">
      <div class="col-12 col-xl-6">
        <div class="p-4 h-100" style="border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 12px;">
          <h3 class="h5" style="margin-bottom: 0.75rem;">{{ _('Logo for the {mode}', mode=light_mode_label) }}</h3>
          <p class="text-sm text-secondary" style="margin-bottom: 1rem;">
            {{ _('This logo is used when the light display mode is active.') }}
          </p>

          {% if logo_light_url %}
          <div class="mb-3" style="margin-bottom: 1.25rem;">
            <p class="text-sm text-secondary" style="margin-bottom: 0.5rem;">{{ _('Current logo ({mode}):', mode=light_mode_label) }}</p>
            <img src="{{ logo_light_url }}" alt="{{ _('Current logo for the {mode}', mode=light_mode_label) }}" style="max-height: 120px; width: auto; border-radius: 6px; background: var(--pipelet-nav-background, #f3f4f6); padding: 8px;">
          </div>
          {% endif %}

          <form method="post" enctype="multipart/form-data" class="row g-3">
            <input type="hidden" name="action" value="upload">
            <input type="hidden" name="variant" value="light">
            <div class="col-12">
              <label class="form-label" for="logo-light">{{ _('Choose logo file') }}</label>
              <input class="form-control" type="file" id="logo-light" name="logo" accept=".png,.jpg,.jpeg,.gif,.svg,.webp">
            </div>
            <div class="col-12">
              <button class="btn btn-primary btn-sm pipelet-btn" type="submit">{{ _('Upload logo') }}</button>
            </div>
          </form>

          {% if logo_light_url %}
          <form method="post" style="margin-top: 1rem;">
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="variant" value="light">
            <button class="btn btn-danger btn-sm pipelet-btn" type="submit" onclick="return confirm('{{ _('Do you really want to delete the {mode} logo?', mode=light_mode_label) }}');">{{ _('Delete logo') }}</button>
          </form>
          {% endif %}
        </div>
      </div>

      <div class="col-12 col-xl-6">
        <div class="p-4 h-100" style="border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 12px;">
          <h3 class="h5" style="margin-bottom: 0.75rem;">{{ _('Logo for the {mode}', mode=dark_mode_label) }}</h3>
          <p class="text-sm text-secondary" style="margin-bottom: 1rem;">
            {{ _('This logo is displayed when the dark display mode is selected.') }}
            {% if logo_dark_fallback %}
              <br>{{ _('If no logo is set here, the {mode} logo is used automatically.', mode=light_mode_label) }}
            {% endif %}
          </p>

          {% if logo_dark_url %}
          <div class="mb-3" style="margin-bottom: 1.25rem;">
            <p class="text-sm text-secondary" style="margin-bottom: 0.5rem;">{{ _('Current logo ({mode}):', mode=dark_mode_label) }}</p>
            <div style="background: #0f172a; padding: 12px; border-radius: 8px; display: inline-block;">
              <img src="{{ logo_dark_url }}" alt="{{ _('Current logo for the {mode}', mode=dark_mode_label) }}" style="max-height: 120px; width: auto;">
            </div>
          </div>
          {% elif logo_light_url %}
          <div class="mb-3" style="margin-bottom: 1.25rem;">
            <p class="text-sm text-secondary" style="margin-bottom: 0.5rem;">{{ _('Currently using the {mode} logo.', mode=light_mode_label) }}</p>
            <div style="background: #0f172a; padding: 12px; border-radius: 8px; display: inline-block;">
              <img src="{{ logo_light_url }}" alt="{{ _('Current logo for the {mode}', mode=light_mode_label) }}" style="max-height: 120px; width: auto;">
            </div>
          </div>
          {% endif %}

          <form method="post" enctype="multipart/form-data" class="row g-3">
            <input type="hidden" name="action" value="upload">
            <input type="hidden" name="variant" value="dark">
            <div class="col-12">
              <label class="form-label" for="logo-dark">{{ _('Choose logo file') }}</label>
              <input class="form-control" type="file" id="logo-dark" name="logo" accept=".png,.jpg,.jpeg,.gif,.svg,.webp">
            </div>
            <div class="col-12">
              <button class="btn btn-primary btn-sm pipelet-btn" type="submit">{{ _('Upload logo') }}</button>
            </div>
          </form>

          {% if logo_dark_url %}
          <form method="post" style="margin-top: 1rem;">
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="variant" value="dark">
            <button class="btn btn-danger btn-sm pipelet-btn" type="submit" onclick="return confirm('{{ _('Do you really want to delete the {mode} logo?', mode=dark_mode_label) }}');">{{ _('Delete logo') }}</button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('.branding-theme-card').forEach(function(card) {
        var toggle = card.querySelector('.branding-card-toggle');
        var content = card.querySelector('.branding-theme-content');

        if (!toggle || !content) {
          return;
        }

        card.classList.add('is-collapsed');
        content.setAttribute('aria-hidden', 'true');
        toggle.setAttribute('aria-expanded', 'false');

        toggle.addEventListener('click', function() {
          var isCollapsed = card.classList.toggle('is-collapsed');
          var expanded = !isCollapsed;
          content.setAttribute('aria-hidden', (!expanded).toString());
          toggle.setAttribute('aria-expanded', expanded.toString());
        });
      });
    });
  </script>
</main>
{% endblock %}