{% extends "var_cms/base.html" %}
{% load var_cms_tags %}

{% block title %}{{ title }}{% endblock %}

{% block breadcrumb %}
  <span>›</span><a href="{% var_cms_list_url app model_name %}">{{ admin.verbose_name_plural|title }}</a>
  <span>›</span>{% if is_add %}Add{% else %}Edit{% endif %}
{% endblock %}

{% block topbar_actions %}
  <a href="{% var_cms_list_url app model_name %}" class="btn btn-ghost btn-sm">← Back</a>
{% endblock %}

{% block content %}
<div style="max-width:880px;">

  {% if form.non_field_errors %}
    <div class="alert alert-err">{{ form.non_field_errors }}</div>
  {% endif %}

  <!-- Role / editable fields info -->
  {% if editable_fields != "__all__" %}
    {% if editable_fields %}
      <div class="role-info">
        🔐 Your role can edit: <strong>{{ editable_fields|join:", " }}</strong>
      </div>
    {% else %}
      <div class="role-info" style="color:var(--red);border-color:rgba(244,63,94,.2);background:rgba(244,63,94,.08);">
        ⛔ Your role cannot edit any fields on this record.
      </div>
    {% endif %}
  {% endif %}

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

    <!-- Readonly fields -->
    {% if readonly_fields %}
    <div class="card" style="padding:18px 22px;margin-bottom:14px;">
      <div style="font-family:var(--fm);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px;">Read-only</div>
      <div class="form-grid">
        {% for fname, val in readonly_fields.items %}
        <div class="form-group">
          <label class="field-label">{{ fname }}</label>
          <div class="readonly-val">{{ val|safe_html }}</div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- Editable fields -->
    <div class="card" style="padding:18px 22px;margin-bottom:14px;">
      <div style="font-family:var(--fm);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:16px;">
        {% if is_add %}New {{ admin.verbose_name }}{% else %}Edit {{ admin.verbose_name }}{% endif %}
      </div>

      {% if form.fields %}
      <div class="form-grid">
        {% for field in form %}
          {% if "Checkbox" in field.field.widget|stringformat:"s" or field.field.widget.input_type == "checkbox" %}
            <div class="form-group-checkbox" style="display:flex;align-items:center;gap:10px;padding:8px 0;grid-column:1/-1;">
              {{ field }}
              <label class="field-label" for="{{ field.id_for_label }}" style="cursor:pointer;margin-bottom:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text-dim);display:inline-flex;align-items:center;gap:4px;">
                {{ field.label }}
                {% if editable_fields != "__all__" and field.html_name in editable_fields %}
                  <span class="role-lock">✏ editable</span>
                {% endif %}
              </label>
              {% if field.help_text %}
                <span style="font-size:11px;color:var(--text-muted);">({{ field.help_text }})</span>
              {% endif %}
              {% if field.errors %}
                <ul class="errorlist">{% for e in field.errors %}<li>{{ e }}</li>{% endfor %}</ul>
              {% endif %}
            </div>
          {% else %}
            {% if "Textarea" in field.field.widget|stringformat:"s" or field.field.widget.input_type == "textarea" %}
              <div class="form-group full">
            {% else %}
              <div class="form-group">
            {% endif %}
              <label class="field-label" for="{{ field.id_for_label }}">
                {{ field.label }}{% if field.field.required %}<span class="req">*</span>{% endif %}
                {% if editable_fields != "__all__" and field.html_name in editable_fields %}
                  <span class="role-lock">✏ editable</span>
                {% endif %}
              </label>
  
              <!-- Rich preview for file/image fields -->
              {% if not is_add and field.field.widget.input_type == "file" %}
                {% var_cms_field_preview obj field.html_name as preview_html %}
                {% if preview_html %}
                <div style="margin-bottom:6px;">{{ preview_html|safe_html }}</div>
                {% endif %}
              {% endif %}
  
              {{ field }}
  
              {% if field.help_text %}
                <span style="font-size:11px;color:var(--text-muted);">{{ field.help_text }}</span>
              {% endif %}
              {% if field.errors %}
                <ul class="errorlist">{% for e in field.errors %}<li>{{ e }}</li>{% endfor %}</ul>
              {% endif %}
            </div>
          {% endif %}
        {% empty %}
          <div style="grid-column:1/-1;color:var(--text-muted);font-size:13px;padding:8px 0;">
            No editable fields available for your role.
          </div>
        {% endfor %}
      </div>
      {% else %}
      <p style="color:var(--text-muted);font-size:13px;">No editable fields for your current role.</p>
      {% endif %}
    </div>

    <!-- Actions -->
    <div style="display:flex;gap:10px;align-items:center;">
      {% if form.fields %}
        <button type="submit" class="btn btn-primary">
          {% if is_add %}✓ Create{% else %}✓ Save Changes{% endif %}
        </button>
      {% endif %}
      <a href="{% var_cms_list_url app model_name %}" class="btn btn-ghost">Cancel</a>
      {% if not is_add and can_delete %}
        <a href="{% var_cms_delete_url app model_name obj.pk %}" class="btn btn-danger" style="margin-left:auto;">
          🗑 Delete
        </a>
      {% endif %}
    </div>
  </form>
</div>
{% endblock %}

{% block extra_head %}
  <style>
    /* Quill Editor Adjustments to match VAR CMS Premium Theme */
    .ql-toolbar.ql-snow {
      border: 1px solid var(--border) !important;
      border-radius: var(--radius) var(--radius) 0 0;
      background: var(--card2) !important;
      padding: 8px 14px !important;
    }
    .ql-container.ql-snow {
      border: 1px solid var(--border) !important;
      border-top: none !important;
      border-radius: 0 0 var(--radius) var(--radius);
      background: var(--input) !important;
      font-family: var(--fb) !important;
      font-size: 13.5px !important;
    }
    .ql-editor {
      min-height: 220px;
      color: var(--text) !important;
    }
    .ql-snow .ql-stroke {
      stroke: var(--text-dim) !important;
    }
    .ql-snow .ql-fill {
      fill: var(--text-dim) !important;
    }
    .ql-snow .ql-picker {
      color: var(--text-dim) !important;
    }
    .ql-snow .ql-picker-options {
      background-color: var(--card) !important;
      border-color: var(--border) !important;
    }
    .ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-label:hover {
      color: var(--accent) !important;
    }
    .ql-snow .ql-picker-item.ql-selected {
      color: var(--accent) !important;
    }
  </style>
{% endblock %}

{% block extra_js %}
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const editors = document.querySelectorAll('.html-editor');
      if (editors.length === 0) return;

      // Load Quill CSS dynamically
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css';
      document.head.appendChild(link);

      // Load Quill JS dynamically
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js';
      script.onload = function() {
        editors.forEach(function(textarea) {
          // Create Quill container
          const container = document.createElement('div');
          container.style.height = '280px';
          
          // Hide the original textarea
          textarea.style.display = 'none';
          textarea.parentNode.insertBefore(container, textarea.nextSibling);

          // Initialize Quill
          const quill = new Quill(container, {
            theme: 'snow',
            modules: {
              toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'clean']
              ]
            }
          });

          // Set initial value
          quill.root.innerHTML = textarea.value;

          // Sync content back to textarea on submit
          const form = textarea.closest('form');
          if (form) {
            form.addEventListener('submit', function() {
              textarea.value = quill.root.innerHTML;
            });
          }
        });
      };
      document.head.appendChild(script);
    });
  </script>
{% endblock %}