{% extends "base.html" %}
{% block title %}{{ _('Create Kanban Column') }}{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
  <div class="max-w-3xl mx-auto">
    <div class="mb-6">
      <h2 class="text-2xl font-bold flex items-center gap-2">
        <span class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center text-white"><i class="fas fa-plus-circle"></i></span>
        {{ _('Create Kanban Column') }}
      </h2>
      <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Add a new column to your kanban board') }}</p>
    </div>

    <div class="bg-card-light dark:bg-card-dark rounded-xl shadow ring-1 ring-border-light/60 dark:ring-border-dark/60">
      <div class="p-6">
        <form method="POST" action="{{ url_for('kanban.create_column') }}" role="form" aria-labelledby="formTitle">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          {% if project_id %}
          <input type="hidden" name="project_id" value="{{ project_id }}">
          {% endif %}

          <h3 id="formTitle" class="sr-only">{{ _('Create Kanban Column form') }}</h3>

          <div class="mb-4">
            <label for="label" class="block text-sm font-medium mb-1">{{ _('Column Label') }} <span aria-hidden="true" class="text-red-600">*</span></label>
            <input type="text" id="label" name="label" required aria-required="true" autocomplete="off" placeholder="{{ _('e.g., In Review, Blocked, Testing') }}" class="w-full rounded-lg border border-border-light dark:border-border-dark bg-background-light dark:bg-gray-700 px-3 py-2" autofocus>
            <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('The display name shown on the kanban board') }}</p>
          </div>

          <div class="mb-4">
            <label for="key" class="block text-sm font-medium mb-1">{{ _('Column Key') }} <span aria-hidden="true" class="text-red-600">*</span></label>
            <input type="text" id="key" name="key" required pattern="[a-z0-9_]+" aria-describedby="keyHelp" class="w-full rounded-lg border border-border-light dark:border-border-dark bg-background-light dark:bg-gray-700 px-3 py-2" placeholder="{{ _('e.g., in_review, blocked, testing') }}">
            <p id="keyHelp" class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Unique identifier (lowercase, no spaces, use underscores). Auto-generated from label if empty.') }}</p>
          </div>

          {% if projects %}
          <div class="mb-4">
            <label for="project_id" class="block text-sm font-medium mb-1">{{ _('Project') }}</label>
            <select id="project_id" name="project_id" class="w-full rounded-lg border border-border-light dark:border-border-dark bg-background-light dark:bg-gray-700 px-3 py-2">
              <option value="">{{ _('Global (for all projects)') }}</option>
              {% for project in projects %}
              <option value="{{ project.id }}" {% if project_id == project.id %}selected{% endif %}>{{ project.name }}</option>
              {% endfor %}
            </select>
            <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Select a project to create project-specific columns, or leave as Global for all projects') }}</p>
          </div>
          {% endif %}

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label for="icon" class="block text-sm font-medium mb-1">{{ _('Icon Class') }}</label>
              <input type="text" id="icon" name="icon" value="fas fa-circle" placeholder="fas fa-circle" class="w-full rounded-lg border border-border-light dark:border-border-dark bg-background-light dark:bg-gray-700 px-3 py-2">
              <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">
                {{ _('Font Awesome icon class') }}
                <a href="https://fontawesome.com/icons" target="_blank" class="underline">{{ _('Browse icons') }}</a>
              </p>
            </div>
            <div>
              <label for="color" class="block text-sm font-medium mb-1">{{ _('Color') }}</label>
              <select id="color" name="color" class="w-full rounded-lg border border-border-light dark:border-border-dark bg-background-light dark:bg-gray-700 px-3 py-2">
                <option value="primary">{{ _('Primary (Blue)') }}</option>
                <option value="secondary" selected>{{ _('Secondary (Gray)') }}</option>
                <option value="success">{{ _('Success (Green)') }}</option>
                <option value="danger">{{ _('Danger (Red)') }}</option>
                <option value="warning">{{ _('Warning (Yellow)') }}</option>
                <option value="info">{{ _('Info (Cyan)') }}</option>
                <option value="dark">{{ _('Dark') }}</option>
              </select>
              <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Bootstrap color class for styling') }}</p>
            </div>
          </div>

          <div class="mt-4">
            <div class="flex items-start gap-2">
              <input type="checkbox" id="is_complete_state" name="is_complete_state" class="mt-1" aria-describedby="completeHelp">
              <div>
                <label for="is_complete_state" class="text-sm font-medium">{{ _('Mark as Complete State') }}</label>
                <p id="completeHelp" class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Tasks moved to this column will be marked as completed') }}</p>
              </div>
            </div>
          </div>

          <div class="mt-6 flex items-center justify-between">
            <a href="{{ url_for('kanban.list_columns', project_id=project_id) if project_id else url_for('kanban.list_columns') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-border-light dark:border-border-dark hover:bg-background-light dark:hover:bg-background-dark">
              <i class="fas fa-times"></i> {{ _('Cancel') }}
            </a>
            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white hover:opacity-90">
              <i class="fas fa-save"></i> {{ _('Create Column') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="mt-4 bg-blue-50 dark:bg-blue-900/30 text-blue-900 dark:text-blue-100 rounded-lg p-4 ring-1 ring-blue-200/60 dark:ring-blue-700/50">
      <p class="flex items-start gap-2"><i class="fas fa-info-circle mt-1"></i> <span><strong>{{ _('Note:') }}</strong> {{ _('The column will be added at the end of the board. You can reorder columns later from the management page.') }}</span></p>
    </div>
  </div>
</div>

<script>
// Auto-generate key from label
document.getElementById('label').addEventListener('input', function(e) {
  const keyInput = document.getElementById('key');
  if (!keyInput.value || keyInput.dataset.autoGenerated !== 'false') {
    const generatedKey = e.target.value
      .toLowerCase()
      .replace(/[^a-z0-9\s]/g, '')
      .replace(/\s+/g, '_');
    keyInput.value = generatedKey;
  }
});

document.getElementById('key').addEventListener('input', function() {
  this.dataset.autoGenerated = 'false';
});
</script>
{% endblock %}