{% extends base_template %}
{% load static %}

{% block title %}{{ action }} SOP{% if site_name %} | {{ site_name }}{% endif %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css">
<link rel="stylesheet" href="{% static 'sops/sops.css' %}">
{% endblock %}

{% block content %}
<meta name="robots" content="noindex, nofollow">

<div class="sop-form-wrap">
  <h1 class="sop-form-title">{{ action }} SOP</h1>

  <form method="post" novalidate>
    {% csrf_token %}

    <div class="sop-card">

      <!-- Title -->
      <div class="sop-field">
        <label class="sop-label" for="{{ form.title.id_for_label }}">Title <span class="req">*</span></label>
        {{ form.title }}
        {% if form.title.errors %}<div class="sop-error">{{ form.title.errors }}</div>{% endif %}
      </div>

      <!-- Categories -->
      <div class="sop-field">
        <label class="sop-label">Categories</label>
        <div id="cat-pill-list" class="cat-pill-list">
          {% for cat in all_categories %}
            <label class="cat-pill {% if cat.id in selected_category_ids %}active{% endif %}"
                   data-cat-id="{{ cat.id }}" data-cat-name="{{ cat.name }}">
              <input type="checkbox" name="categories" value="{{ cat.id }}"
                     {% if cat.id in selected_category_ids %}checked{% endif %}
                     style="display:none;">
              <span>{{ cat.name }}</span>
              <span class="check">&#10003;</span>
            </label>
          {% endfor %}
        </div>
        <div class="cat-add-row">
          <input type="text" id="cat-add-input" class="cat-add-input" placeholder="New category…" autocomplete="off">
          <button type="button" id="cat-add-btn" class="cat-add-btn">+ Add</button>
        </div>
        <p class="sop-hint">Click to toggle. Type a name to create a new category on the fly.</p>
      </div>

      <!-- Order -->
      <div class="sop-field">
        <label class="sop-label" for="{{ form.order.id_for_label }}">Display Order</label>
        {{ form.order }}
        <p class="sop-hint">Lower numbers appear first.</p>
        {% if form.order.errors %}<div class="sop-error">{{ form.order.errors }}</div>{% endif %}
      </div>

      <!-- Published -->
      <div class="sop-field">
        <div class="sop-check-row">
          {{ form.is_published }}
          <label for="{{ form.is_published.id_for_label }}">Published (visible to team)</label>
        </div>
        {% if form.is_published.errors %}<div class="sop-error">{{ form.is_published.errors }}</div>{% endif %}
      </div>

    </div>

    <!-- Content editor -->
    <div class="sop-card">
      <label class="sop-label">Content <span class="req">*</span> <span style="font-weight:400;color:var(--sops-muted);font-size:0.82rem;">Markdown supported</span></label>
      {{ form.content }}
      {% if form.content.errors %}<div class="sop-error">{{ form.content.errors }}</div>{% endif %}
    </div>

    <!-- Actions -->
    <div class="sop-form-actions">
      <div class="sop-form-actions-left">
        <button type="submit" class="sop-btn sop-btn-primary">Save SOP</button>
        {% if sop %}
          <a href="{% url 'sops:detail' sop.slug %}" class="sop-btn sop-btn-ghost">Cancel</a>
        {% else %}
          <a href="{% url 'sops:list' %}" class="sop-btn sop-btn-ghost">Cancel</a>
        {% endif %}
      </div>
      {% if sop %}
        <a href="{% url 'sops:delete' sop.slug %}" class="sop-btn sop-btn-danger">Delete SOP</a>
      {% endif %}
    </div>

  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js"></script>
<script>
  const easyMDE = new EasyMDE({
    element: document.getElementById('sop-content-editor'),
    spellChecker: false,
    autosave: {
      enabled: true,
      uniqueId: 'sop-editor-{% if sop %}{{ sop.slug }}{% else %}new{% endif %}',
      delay: 2000,
    },
    toolbar: [
      { name: 'bold',           action: EasyMDE.toggleBold,           className: 'fa fa-bold',          title: 'Bold' },
      { name: 'italic',         action: EasyMDE.toggleItalic,         className: 'fa fa-italic',        title: 'Italic' },
      { name: 'heading',        action: EasyMDE.toggleHeadingSmaller, className: 'fa fa-heading',       title: 'Heading' },
      '|',
      { name: 'unordered-list', action: EasyMDE.toggleUnorderedList,  className: 'fa fa-list-ul',      title: 'Bulleted List' },
      { name: 'ordered-list',   action: EasyMDE.toggleOrderedList,    className: 'fa fa-list-ol',      title: 'Numbered List' },
      '|',
      { name: 'link',           action: EasyMDE.drawLink,             className: 'fa fa-link',         title: 'Insert Link' },
      { name: 'table',          action: EasyMDE.drawTable,            className: 'fa fa-table',        title: 'Insert Table' },
      { name: 'hr',             action: EasyMDE.drawHorizontalRule,   className: 'fa fa-minus',        title: 'Horizontal Rule' },
      '|',
      { name: 'preview',        action: EasyMDE.togglePreview,        className: 'fa fa-eye no-disable',        title: 'Preview' },
      { name: 'side-by-side',   action: EasyMDE.toggleSideBySide,    className: 'fa fa-columns no-disable',    title: 'Side by Side' },
      { name: 'fullscreen',     action: EasyMDE.toggleFullScreen,     className: 'fa fa-arrows-alt no-disable', title: 'Fullscreen' },
      '|',
      { name: 'guide', action: 'https://www.markdownguide.org/basic-syntax/', className: 'fa fa-question-circle', title: 'Markdown Guide' },
    ],
    minHeight: '400px',
    placeholder: 'Write the SOP content here using Markdown…\n\n## Overview\n\nDescribe the purpose of this procedure.\n\n## Steps\n\n1. First step\n2. Second step\n3. Third step\n',
  });

  // Category pill toggle
  document.querySelectorAll('.cat-pill').forEach(pill => {
    pill.addEventListener('click', () => {
      const cb = pill.querySelector('input[type=checkbox]');
      cb.checked = !cb.checked;
      pill.classList.toggle('active', cb.checked);
    });
  });

  // Add new category inline
  const catInput = document.getElementById('cat-add-input');
  const catBtn = document.getElementById('cat-add-btn');
  const pillList = document.getElementById('cat-pill-list');

  function addCategory() {
    const name = catInput.value.trim();
    if (!name) return;

    const existing = [...pillList.querySelectorAll('.cat-pill')].find(
      p => p.dataset.catName && p.dataset.catName.toLowerCase() === name.toLowerCase()
    );
    if (existing) {
      const cb = existing.querySelector('input[type=checkbox]');
      cb.checked = true;
      existing.classList.add('active');
      catInput.value = '';
      catInput.focus();
      return;
    }

    const label = document.createElement('label');
    label.className = 'cat-pill active';
    label.dataset.catName = name;
    label.innerHTML = `<input type="hidden" name="new_category" value="${name.replace(/"/g, '&quot;')}"><span>${name}</span><span class="check">&#10003;</span>`;
    pillList.appendChild(label);

    catInput.value = '';
    catInput.focus();
  }

  catBtn.addEventListener('click', addCategory);
  catInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); addCategory(); } });
</script>
{% endblock %}