{% extends "base.html" %}
{% block title %}{% if epic %}Edit {{ epic.name }}{% else %}Create Epic{% endif %}{% endblock %}
{% block extra_head %}
{% include "components/rich_text_editor_assets.html" %}
{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li><a href="{% url 'epics-overview' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Epics</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    {% if epic %}
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">{{ epic.name }}</li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Edit</li>
    {% else %}
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">New Epic</li>
    {% endif %}
  </ol>
</nav>
{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto">
  <div class="mb-8">
    <h1 class="text-2xl font-bold tracking-tight">{% if epic %}Edit Epic{% else %}Create Epic{% endif %}</h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{% if epic %}Update epic details{% else %}Create a new epic to group related tickets{% endif %}</p>
  </div>

  <form method="post" x-data="{ description: '{{ epic.description|escapejs|default:'' }}' }">
    {% csrf_token %}

    <div class="dk-card mb-6 divide-y divide-gray-200 dark:divide-gray-600">
      <div class="px-6 py-4">
        <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Epic Details</h2>
        <p class="text-xs text-gray-500 mt-0.5">Basic information about the epic.</p>
      </div>
      <div class="px-6 py-5 space-y-5">
        {% if not selected_project %}
        <div>
          <label for="id_project" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">Project <span class="text-red-500">*</span></label>
          <select id="id_project" name="project" required
                  class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
            <option value="">Select a project...</option>
            {% for p in projects %}
            <option value="{{ p.id }}" {% if epic and epic.project_id == p.id %}selected{% endif %}>{{ p.name }}</option>
            {% endfor %}
          </select>
        </div>
        {% else %}
        <div>
          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">Project</label>
          <input type="text" value="{{ selected_project.name }}" disabled
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-2 text-sm">
          <input type="hidden" name="project" value="{{ selected_project.id }}">
        </div>
        {% endif %}

        <div>
          <label for="id_name" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">Name <span class="text-red-500">*</span></label>
          <input type="text" id="id_name" name="name" value="{% if epic %}{{ epic.name }}{% endif %}" required placeholder="Enter epic name"
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
        </div>

        <div>
          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">Description</label>
          {% include "components/rich_text_editor.html" with input_name="description" alpine_model="description" %}
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label for="id_start_date" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">Start Date</label>
            <input type="date" id="id_start_date" name="start_date" value="{% if epic %}{{ epic.start_date|date:'Y-m-d' }}{% endif %}"
                   onclick="this.showPicker()"
                   class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
           </div>
           <div>
             <label for="id_end_date" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">End Date</label>
             <input type="date" id="id_end_date" name="end_date" value="{% if epic %}{{ epic.end_date|date:'Y-m-d' }}{% endif %}"
                    onclick="this.showPicker()"
                    class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
          </div>
        </div>
      </div>
    </div>

    <div class="flex items-center gap-3">
      <button type="submit" class="dk-btn dk-btn-primary">
        <i class="fas fa-save"></i> {% if epic %}Save Changes{% else %}Create Epic{% endif %}
      </button>
      <a href="{% if epic %}{% url 'epics-overview-project' epic.project_id %}{% elif selected_project %}{% url 'epics-overview-project' selected_project.id %}{% else %}{% url 'epics-overview' %}{% endif %}" class="dk-btn dk-btn-ghost">
        Cancel
      </a>
    </div>
  </form>
</div>
{% endblock %}
{% block extra_scripts %}
{% endblock %}