{% extends "base.html" %}
{% block title %}Import Tickets{% 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 'tickets-list' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Tickets</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Import</li>
  </ol>
</nav>
{% endblock %}
{% block content %}
<div class="mb-6">
  <a href="/dashboard/tickets/" class="dk-btn dk-btn-ghost text-sm mb-3">
    <i class="fas fa-arrow-left"></i> Back to Tickets
  </a>
  <h1 class="text-2xl font-bold">Import Tickets</h1>
  <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Upload an Excel file to create tickets in bulk.</p>
</div>

<div class="dk-card divide-y divide-gray-200 dark:divide-gray-600 mb-6">
  <div class="px-6 py-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Upload File</h3><p class="text-xs text-gray-500 mt-0.5">Select an Excel file to import tickets</p></div>
  <div class="px-6 py-5">
    <form method="post" enctype="multipart/form-data" class="space-y-4">
      {% csrf_token %}
      <div>
        <label class="block text-xs font-medium text-gray-500 mb-1">Excel File (.xlsx)</label>
        <input type="file" name="file" accept=".xlsx" required
               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 dark:file:bg-gray-700 dark:file:text-gray-200">
      </div>
      <button type="submit" class="dk-btn dk-btn-primary text-sm">
        <i class="fas fa-upload"></i> Import
      </button>
    </form>
  </div>
</div>

<div class="dk-card divide-y divide-gray-200 dark:divide-gray-600 mb-6">
  <div class="px-6 py-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Required Columns</h3><p class="text-xs text-gray-500 mt-0.5">Expected Excel file format</p></div>
  <div class="px-6 py-5 text-sm">
    <p class="mb-2 text-gray-600 dark:text-gray-400">The Excel file must have a header row with the following columns:</p>
    <ul class="list-disc list-inside space-y-1 text-gray-600 dark:text-gray-400">
      <li><strong>Name</strong> (required) - Ticket name</li>
      <li><strong>Project</strong> (required) - Project name or prefix</li>
      <li><strong>Status</strong> - Status name (uses first available if omitted)</li>
      <li><strong>Priority</strong> - Priority name</li>
      <li><strong>Epic</strong> - Epic name</li>
      <li><strong>Start Date</strong> - Start date</li>
      <li><strong>Due Date</strong> - Due date</li>
      <li><strong>Description</strong> - Ticket description</li>
      <li><strong>Assignees</strong> - Comma-separated email or username</li>
    </ul>
  </div>
</div>

{% if result %}
<div class="dk-card divide-y divide-gray-200 dark:divide-gray-600">
  <div class="px-6 py-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Import Results</h3><p class="text-xs text-gray-500 mt-0.5">{{ result.created }} ticket(s) created</p></div>
  <div class="px-6 py-5">
    <div class="text-lg font-bold text-green-600 mb-3">{{ result.created }} ticket(s) created successfully.</div>
    {% if result.errors %}
    <div class="mt-3">
      <h3 class="text-sm font-semibold text-red-500 mb-2">Errors ({{ result.errors|length }})</h3>
      <ul class="list-disc list-inside text-sm text-red-600 dark:text-red-400 space-y-1 max-h-60 overflow-y-auto">
        {% for err in result.errors %}
        <li>{{ err }}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
    <div class="mt-4">
      <a href="/dashboard/tickets/" class="dk-btn dk-btn-primary text-sm">
        <i class="fas fa-arrow-left"></i> Back to Tickets
      </a>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}