{% load i18n kanban_tags %}
<div class="d-flex justify-content-between align-items-center mb-1">
    <label class="form-label small fw-bold text-muted text-uppercase mb-0">
        <i class="fas fa-align-left me-1"></i>{% trans "Description" %}
    </label>
    {% if can_write %}
        <div class="btn-group btn-group-sm" role="group" id="card-desc-toggle-group">
            <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2 {% if not card.description %}d-none{% endif %}" id="btn-card-desc-edit" onclick="toggleCardDescMode('edit')">
                <i class="fas fa-pen me-1"></i>{% trans "Edit" %}
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2 d-none" id="btn-card-desc-view" onclick="toggleCardDescMode('view')">
                <i class="fas fa-eye me-1"></i>{% trans "Preview" %}
            </button>
        </div>
    {% endif %}
</div>

<!-- Rendered Markdown View (Lightbox clickable) -->
<div id="card-desc-view" class="kanban-desc-box p-3 rounded mb-2 {% if not card.description and can_write %}d-none{% endif %}">
    <div id="card-desc-rendered" class="kanban-desc-rendered-content text-break">
        {% if card.description %}
            {{ card.description|render_markdown }}
        {% else %}
            <em class="text-muted">{% trans "No description provided." %}</em>
        {% endif %}
    </div>
    {% if can_write and not card.description %}
        <div class="mt-2 text-center" id="card-desc-empty-prompt">
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleCardDescMode('edit')">
                <i class="fas fa-plus me-1"></i>{% trans "Add description" %}
            </button>
        </div>
    {% endif %}
</div>

{% if can_write %}
    <!-- Edit Form -->
    <form id="card-desc-form"
          class="{% if card.description %}d-none{% endif %}"
          hx-post="{% url 'aa_kanban:update_card' card.id %}"
          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          hx-target="#card-description-status"
          hx-swap="innerHTML">
        <div class="kanban-markdown-editor-wrapper mb-2" id="card-editor-dropzone">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <small class="text-muted"><i class="fab fa-markdown me-1"></i>{% trans "Markdown supported" %}</small>
                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="btn-attach-card-img" title="{% trans 'Attach image (PNG, JPG, GIF, WebP)' %}">
                    <i class="fas fa-image me-1"></i>{% trans "Attach Image" %}
                </button>
            </div>
            <textarea class="form-control kanban-markdown-textarea"
                      id="card-desc-textarea"
                      name="description"
                      rows="4"
                      data-upload-url="{% url 'aa_kanban:upload_image' %}"
                      placeholder="{% trans 'Add a detailed description... Paste (Ctrl+V) or drag & drop images.' %}">{{ card.description }}</textarea>
            <div class="d-flex justify-content-between align-items-center mt-1">
                <small class="text-muted" style="font-size: 0.72rem;">
                    <i class="fas fa-info-circle me-1"></i>{% trans "Paste (Ctrl+V), drag & drop, or click Attach Image (max 5MB)." %}
                </small>
            </div>
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <button type="submit" class="btn btn-primary btn-sm me-1" id="btn-save-card-desc">
                    <i class="fas fa-save me-1"></i>{% trans "Save Description" %}
                </button>
                {% if card.description %}
                    <button type="button" class="btn btn-secondary btn-sm" onclick="toggleCardDescMode('view')">
                        {% trans "Cancel" %}
                    </button>
                {% endif %}
            </div>
            <span id="card-description-status" class="small"></span>
        </div>
    </form>
{% endif %}