{% extends "base.html" %}

{% block title %}Edit {{ entry.type|title }} #{{ entry.id }} - Workshop Admin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Edit {{ entry.type|title }} #{{ entry.id }}</h1>
        <p class="mt-2 text-sm text-gray-600">Created {{ entry.timestamp|timeago }}</p>
    </div>

    <!-- Edit Form -->
    <div class="bg-white shadow rounded-lg">
        <form method="post" class="px-4 py-5 sm:p-6">
            <div class="space-y-6">
                <!-- Type -->
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700">Type</label>
                    <select name="type" id="type" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border">
                        <option value="note" {% if entry.type == 'note' %}selected{% endif %}>Note</option>
                        <option value="gotcha" {% if entry.type == 'gotcha' %}selected{% endif %}>Gotcha</option>
                        <option value="decision" {% if entry.type == 'decision' %}selected{% endif %}>Decision</option>
                        <option value="preference" {% if entry.type == 'preference' %}selected{% endif %}>Preference</option>
                    </select>
                </div>

                <!-- Content -->
                <div>
                    <label for="content" class="block text-sm font-medium text-gray-700">Content</label>
                    <textarea name="content" id="content" rows="10" required
                              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border">{{ entry.content }}</textarea>
                    <p class="mt-2 text-sm text-gray-500">The main content of this entry</p>
                </div>

                <!-- Reasoning/Metadata -->
                <div>
                    <label for="reasoning" class="block text-sm font-medium text-gray-700">
                        <span id="reasoning-label">
                            {% if entry.type == 'decision' %}Reasoning{% else %}Additional Context{% endif %}
                        </span>
                        <span class="text-gray-500 font-normal">(optional)</span>
                    </label>
                    <textarea name="reasoning" id="reasoning" rows="5"
                              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border">{{ entry.metadata or '' }}</textarea>
                    <p class="mt-2 text-sm text-gray-500">Additional context or reasoning</p>
                </div>
            </div>

            <!-- Actions -->
            <div class="mt-6 flex justify-between">
                <a href="/entries/{{ entry.id }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Update reasoning label based on type
document.getElementById('type').addEventListener('change', function(e) {
    const label = document.getElementById('reasoning-label');
    label.textContent = e.target.value === 'decision' ? 'Reasoning' : 'Additional Context';
});
</script>
{% endblock %}