{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-5xl mx-auto px-4 pt-12">
    <div class="mb-8">
        <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
            <a href="/orgs/{{ current_org }}/projects/{{ current_project }}/policies" class="hover:underline">Policies</a>
            <span>&rsaquo;</span>
            <span>{{ policy.name }}</span>
        </div>
        <h1 class="text-2xl font-bold">Edit Policy</h1>
    </div>

    <div class="border border-gray-200 rounded-lg p-6">
        <form method="post" action="/orgs/{{ current_org }}/projects/{{ current_project }}/policies/{{ policy.name }}" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="policy_type" value="{{ policy.policy_type }}">

            <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                <span>Type:</span>
                {% if policy.policy_type == "soak_time" %}
                <span class="bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded text-xs font-medium">Soak Time</span>
                {% elif policy.policy_type == "branch_restriction" %}
                <span class="bg-orange-100 text-orange-700 px-1.5 py-0.5 rounded text-xs font-medium">Branch Restriction</span>
                {% endif %}
            </div>

            {% if policy.policy_type == "soak_time" %}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Source environment</label>
                    <select name="source_environment" class="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm bg-white">
                        {% for env in environments %}
                        <option value="{{ env.name }}" {% if env.name == policy.config.source_environment %}selected{% endif %}>{{ env.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Target environment</label>
                    <select name="target_environment" class="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm bg-white">
                        {% for env in environments %}
                        <option value="{{ env.name }}" {% if env.name == policy.config.target_environment %}selected{% endif %}>{{ env.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Soak duration (seconds)</label>
                <input type="number" name="duration_seconds" min="1" value="{{ policy.config.duration_seconds }}"
                    class="w-48 border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900">
                <p class="text-xs text-gray-500 mt-1">e.g. 1800 = 30 minutes, 3600 = 1 hour</p>
            </div>

            {% elif policy.policy_type == "branch_restriction" %}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Branch pattern</label>
                    <input type="text" name="branch_pattern" value="{{ policy.config.branch_pattern }}"
                        class="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-gray-900">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Target environment</label>
                    <select name="target_environment" class="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm bg-white">
                        {% for env in environments %}
                        <option value="{{ env.name }}" {% if env.name == policy.config.target_environment %}selected{% endif %}>{{ env.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            {% endif %}

            <div class="flex items-center gap-3 pt-2">
                <button type="submit" class="bg-gray-900 text-white px-4 py-2 rounded-md text-sm hover:bg-gray-800 transition-colors">
                    Save Changes
                </button>
                <a href="/orgs/{{ current_org }}/projects/{{ current_project }}/policies" class="text-sm text-gray-500 hover:text-gray-900">Cancel</a>
            </div>
        </form>
    </div>
</section>
{% endblock %}