{% extends "base.html" %}
{% block title %}{{ _('Edit 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-edit"></i></span>
        {{ _('Edit Kanban Column') }}
      </h2>
      <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Modify column settings') }}</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.edit_column', column_id=column.id) }}" role="form" aria-labelledby="editFormTitle">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

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

          <div class="mb-4">
            <label for="key" class="block text-sm font-medium mb-1">{{ _('Column Key') }}</label>
            <input type="text" id="key" value="{{ column.key }}" disabled class="w-full rounded-lg border border-border-light dark:border-border-dark bg-background-light dark:bg-gray-700 px-3 py-2 opacity-75 cursor-not-allowed">
            <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('The key cannot be changed after creation') }}</p>
            {% if column.project_id %}
            <p class="mt-1 text-xs text-blue-600 dark:text-blue-400"><i class="fas fa-info-circle"></i> {{ _('This is a project-specific column') }}</p>
            {% else %}
            <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark"><i class="fas fa-globe"></i> {{ _('This is a global column (for all projects)') }}</p>
            {% endif %}
          </div>

          <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" value="{{ column.label }}" required aria-required="true" 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="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="{{ column.icon }}" 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 class="mt-2 inline-flex items-center gap-2 text-sm bg-background-light dark:bg-background-dark border border-border-light dark:border-border-dark rounded px-2 py-1">
                <i class="{{ column.icon }}"></i> <span>{{ _('Preview') }}</span>
              </div>
            </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" {% if column.color == 'primary' %}selected{% endif %}>{{ _('Primary (Blue)') }}</option>
                <option value="secondary" {% if column.color == 'secondary' %}selected{% endif %}>{{ _('Secondary (Gray)') }}</option>
                <option value="success" {% if column.color == 'success' %}selected{% endif %}>{{ _('Success (Green)') }}</option>
                <option value="danger" {% if column.color == 'danger' %}selected{% endif %}>{{ _('Danger (Red)') }}</option>
                <option value="warning" {% if column.color == 'warning' %}selected{% endif %}>{{ _('Warning (Yellow)') }}</option>
                <option value="info" {% if column.color == 'info' %}selected{% endif %}>{{ _('Info (Cyan)') }}</option>
                <option value="dark" {% if column.color == 'dark' %}selected{% endif %}>{{ _('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" {% if column.is_complete_state %}checked{% endif %} 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-4">
            <div class="flex items-start gap-2">
              <input type="checkbox" id="is_active" name="is_active" {% if column.is_active %}checked{% endif %} class="mt-1" aria-describedby="activeHelp">
              <div>
                <label for="is_active" class="text-sm font-medium">{{ _('Active') }}</label>
                <p id="activeHelp" class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Inactive columns are hidden from the kanban board') }}</p>
              </div>
            </div>
          </div>

          <div class="mt-6 flex items-center justify-between">
            <a href="{{ url_for('kanban.list_columns', project_id=column.project_id) if column.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> {{ _('Save Changes') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    {% if column.is_system %}
    <div class="mt-4 bg-yellow-50 dark:bg-yellow-900/30 text-yellow-900 dark:text-yellow-100 rounded-lg p-4 ring-1 ring-yellow-200/60 dark:ring-yellow-700/50">
      <p class="flex items-start gap-2"><i class="fas fa-exclamation-triangle mt-1"></i> <span><strong>{{ _('System Column:') }}</strong> {{ _('This is a system column. You can customize its appearance but cannot delete it.') }}</span></p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}