{% extends "base.html" %}

{% block title %}{% if mode == 'edit' %}{{ t("form.edit_item") }}{% else %}{{ t("form.create_item") }}{% endif %} — IssueDeck{% endblock %}

{% block content %}
<div class="space-y-6">

  {# ── Page header ── #}
  <div class="flex items-center gap-3">
    <a href="{% if mode == 'edit' %}/dashboard/{{ project_key }}/items/{{ item.local_id }}{% else %}/dashboard/{{ project_key }}/list{% endif %}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400
              hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
      </svg>
      {{ t("common.back") }}
    </a>
  </div>

  <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
    {% if mode == 'edit' %}{{ t("form.edit_item") }}{% else %}{{ t("form.create_item") }}{% endif %}
  </h1>

  {# ── Form card ── #}
  <div class="rounded-lg border border-gray-200 dark:border-gray-800
              bg-white dark:bg-gray-900 shadow-sm">
    <form method="post"
          action="{% if mode == 'edit' %}/dashboard/{{ project_key }}/items/{{ item.local_id }}/edit{% else %}/dashboard/{{ project_key }}/items-new{% endif %}"
          class="p-5 space-y-6"
          x-data="{
            previewMode: false,
            bodyText: {{ (item.body if item and item.body else '') | tojson }},
            get renderedBody() {
              if (typeof marked !== 'undefined' && this.bodyText) {
                return marked.parse(this.bodyText);
              }
              return '';
            }
          }">

      {# ── Kind selector (create only) ── #}
      {% if mode == 'create' %}
        <div>
          <label for="kind" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("common.kind") }}
          </label>
          <select id="kind" name="kind" required
                  class="w-full sm:w-64 px-3 py-2 rounded-lg text-sm
                         bg-white dark:bg-gray-800
                         border border-gray-300 dark:border-gray-600
                         text-gray-900 dark:text-gray-100
                         focus:ring-2 focus:ring-primary-500 focus:border-primary-500
                         transition-colors">
            {% for kind_key, kind_cfg in project.kinds.items() %}
              <option value="{{ kind_key }}">{{ kind_cfg.label | default(kind_key) }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}

      {# ── Title ── #}
      <div>
        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
          {{ t("common.title") }}
        </label>
        <input type="text" id="title" name="title" required
               value="{{ item.title if item and item.title else '' }}"
               placeholder="{{ t('form.title_placeholder') }}"
               class="w-full px-3 py-2 rounded-lg text-sm
                      bg-white dark:bg-gray-800
                      border border-gray-300 dark:border-gray-600
                      text-gray-900 dark:text-gray-100
                      placeholder-gray-400 dark:placeholder-gray-500
                      focus:ring-2 focus:ring-primary-500 focus:border-primary-500
                      transition-colors">
      </div>

      {# ── Body with Markdown preview ── #}
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
          {{ t("common.content") }}
        </label>
        <div class="rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden
                    focus-within:ring-2 focus-within:ring-primary-500 focus-within:border-primary-500
                    transition-colors">
          {# Tab bar #}
          <div class="flex border-b border-gray-200 dark:border-gray-700
                      bg-gray-50 dark:bg-gray-800/50">
            <button type="button"
                    @click="previewMode = false"
                    :class="!previewMode
                      ? 'text-primary-600 dark:text-primary-400 border-b-2 border-primary-600 dark:border-primary-400 bg-white dark:bg-gray-900'
                      : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                    class="px-4 py-2 text-sm font-medium transition-colors -mb-px">
              {{ t("common.edit") }}
            </button>
            <button type="button"
                    @click="previewMode = true"
                    :class="previewMode
                      ? 'text-primary-600 dark:text-primary-400 border-b-2 border-primary-600 dark:border-primary-400 bg-white dark:bg-gray-900'
                      : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                    class="px-4 py-2 text-sm font-medium transition-colors -mb-px">
              {{ t("common.preview") }}
            </button>
          </div>

          {# Edit textarea #}
          <div x-show="!previewMode">
            <textarea id="body" name="body" rows="12"
                      x-model="bodyText"
                      placeholder="{{ t('form.body_placeholder') }}"
                      class="w-full px-4 py-3 text-sm
                             bg-white dark:bg-gray-900
                             text-gray-900 dark:text-gray-100
                             placeholder-gray-400 dark:placeholder-gray-500
                             border-0 focus:ring-0
                             resize-y font-mono"></textarea>
          </div>

          {# Preview panel #}
          <div x-show="previewMode" x-cloak
               class="px-4 py-3 min-h-[18rem] bg-white dark:bg-gray-900">
            <template x-if="bodyText && bodyText.trim()">
              <div x-html="renderedBody"
                   class="prose prose-sm dark:prose-invert max-w-none
                          prose-headings:text-gray-900 dark:prose-headings:text-gray-100
                          prose-headings:font-semibold
                          prose-h1:text-xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:dark:border-gray-700 prose-h1:pb-2
                          prose-h2:text-lg
                          prose-p:text-gray-700 prose-p:dark:text-gray-300
                          prose-a:text-primary-600 prose-a:dark:text-primary-400
                          prose-code:text-sm prose-code:bg-gray-100 prose-code:dark:bg-gray-800
                          prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:font-mono
                          prose-pre:bg-gray-50 prose-pre:dark:bg-gray-800 prose-pre:border prose-pre:border-gray-200 prose-pre:dark:border-gray-700 prose-pre:rounded-lg
                          prose-li:text-gray-700 prose-li:dark:text-gray-300
                          prose-blockquote:border-primary-300 prose-blockquote:dark:border-primary-700
                          prose-img:rounded-lg prose-img:shadow-sm">
              </div>
            </template>
            <template x-if="!bodyText || !bodyText.trim()">
              <p class="text-sm text-gray-400 dark:text-gray-600 italic">{{ t("form.empty_preview") }}</p>
            </template>
          </div>
        </div>
        <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">{{ t("form.body_help") }}</p>
      </div>

      {# ── Tags ── #}
      <div>
        <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
          {{ t("common.tags") }}
        </label>
        <input type="text" id="tags" name="tags"
               value="{{ item.tags | join(', ') if item and item.tags else '' }}"
               placeholder="{{ t('form.tags_placeholder') }}"
               class="w-full px-3 py-2 rounded-lg text-sm
                      bg-white dark:bg-gray-800
                      border border-gray-300 dark:border-gray-600
                      text-gray-900 dark:text-gray-100
                      placeholder-gray-400 dark:placeholder-gray-500
                      focus:ring-2 focus:ring-primary-500 focus:border-primary-500
                      transition-colors">
        <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">{{ t("form.tags_help") }}</p>
      </div>

      {# External links #}
      <div>
        <label for="external_links" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
          {{ t("form.external_links") }}
        </label>
        <textarea id="external_links" name="external_links" rows="3"
                  placeholder="{{ t('form.external_links_placeholder') }}"
                  class="w-full px-3 py-2 rounded-lg text-sm
                         bg-white dark:bg-gray-800
                         border border-gray-300 dark:border-gray-600
                         text-gray-900 dark:text-gray-100
                         placeholder-gray-400 dark:placeholder-gray-500
                         focus:ring-2 focus:ring-primary-500 focus:border-primary-500
                         transition-colors">{% if item and item.external_links %}{% for link in item.external_links %}{% if link.label %}{{ link.label }} | {% endif %}{{ link.url }}{% if not loop.last %}
{% endif %}{% endfor %}{% endif %}</textarea>
        <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">{{ t("form.external_links_help") }}</p>
      </div>

      {# ── Branches (checkboxes) ── #}
      {% if project.branches %}
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            {{ t("common.branches") }}
          </label>
          <div class="flex flex-wrap gap-3">
            {% for branch in project.branches %}
              <label class="flex items-center gap-2 cursor-pointer group">
                <input type="checkbox" name="applies_to" value="{{ branch.key }}"
                       {% if item and item.applies_to and branch.key in item.applies_to %}checked{% endif %}
                       class="rounded border-gray-300 dark:border-gray-600
                              text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                <span class="text-sm text-gray-700 dark:text-gray-300
                             group-hover:text-gray-900 dark:group-hover:text-gray-100
                             transition-colors">
                  {{ branch.label }}
                </span>
              </label>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {# ── Status (edit only) ── #}
      {% if mode == 'edit' %}
        <div>
          <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
            {{ t("common.status") }}
          </label>
          <select id="status" name="status"
                  class="w-full sm:w-64 px-3 py-2 rounded-lg text-sm
                         bg-white dark:bg-gray-800
                         border border-gray-300 dark:border-gray-600
                         text-gray-900 dark:text-gray-100
                         focus:ring-2 focus:ring-primary-500 focus:border-primary-500
                         transition-colors">
            {% for status_key, status_cfg in project.statuses.items() %}
              {% if status_key != 'done' %}
                <option value="{{ status_key }}"
                        {% if item and item.status == status_key %}selected{% endif %}>
                  {{ status_cfg.label | default(status_key) }}
                </option>
              {% endif %}
            {% endfor %}
          </select>
          <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">
            {{ t("form.done_requires_ship") }}
          </p>
        </div>
      {% endif %}

      {# ── Form actions ── #}
      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
        <a href="{% if mode == 'edit' %}/dashboard/{{ project_key }}/items/{{ item.local_id }}{% else %}/dashboard/{{ project_key }}/list{% endif %}"
           class="px-4 py-2 rounded-lg text-sm font-medium
                  text-gray-700 dark:text-gray-300
                  hover:bg-gray-100 dark:hover:bg-gray-800
                  transition-colors">
          {{ t("common.cancel") }}
        </a>
        <button type="submit"
                class="inline-flex items-center gap-1.5 px-5 py-2 rounded-lg text-sm font-medium
                       bg-primary-600 text-white hover:bg-primary-700
                       shadow-sm transition-colors">
          {% if mode == 'edit' %}
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
            </svg>
            {{ t("common.save") }}
          {% else %}
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
            </svg>
            {{ t("common.create") }}
          {% endif %}
        </button>
      </div>
    </form>
  </div>

</div>
{% endblock %}