{% extends "base.html" %}

{% block title %}SLA Settings - {{ workspace.name }} - Redea Social{% endblock %}

{% block content %}
<div class="max-w-lg">
    <!-- Header -->
    <div class="flex items-center gap-3 mb-6">
        <a href="{% url 'inbox:feed' workspace_id=workspace.id %}"
           class="text-stone-400 hover:text-stone-600 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        </a>
        <div>
            <h2 class="text-xl font-semibold text-stone-900 tracking-tight">SLA Settings</h2>
            <p class="text-sm text-stone-500 mt-0.5">Set response time targets for your inbox.</p>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white border border-stone-200 rounded-xl p-6" style="box-shadow: var(--shadow-xs);">
        <form method="post">
            {% csrf_token %}
            <div class="space-y-5">
                <!-- Enable toggle -->
                <div class="flex items-center justify-between">
                    <div>
                        <label class="text-[14px] font-semibold text-stone-800">Enable SLA Timer</label>
                        <p class="text-[12px] text-stone-500 mt-0.5">Show countdown timers and overdue badges on unresolved messages.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="is_active" {% if config.is_active %}checked{% endif %} class="sr-only peer">
                        <div class="w-9 h-5 bg-stone-200 rounded-full peer peer-checked:bg-orange-500 transition-colors after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full"></div>
                    </label>
                </div>

                <!-- Target time -->
                <div>
                    <label for="id_target_response_minutes" class="block text-[13px] font-semibold text-stone-700 mb-1.5">Target Response Time (minutes)</label>
                    {{ form.target_response_minutes }}
                    <p class="text-[11px] text-stone-400 mt-1">Messages exceeding this time will show an "Overdue" badge.</p>
                </div>

                <!-- Auto-resolve -->
                <div class="flex items-center justify-between pt-2 border-t border-stone-100">
                    <div>
                        <label class="text-[14px] font-semibold text-stone-800">Auto-resolve on Reply</label>
                        <p class="text-[12px] text-stone-500 mt-0.5">Automatically mark messages as resolved when a reply is sent.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="auto_resolve_on_reply" {% if config.auto_resolve_on_reply %}checked{% endif %} class="sr-only peer">
                        <div class="w-9 h-5 bg-stone-200 rounded-full peer peer-checked:bg-orange-500 transition-colors after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full"></div>
                    </label>
                </div>
            </div>

            <div class="flex items-center gap-3 mt-8 pt-5 border-t border-stone-100">
                <button type="submit"
                        class="inline-flex items-center gap-1.5 px-5 py-2 text-[13px] font-semibold text-white rounded-full transition-all duration-150 cursor-pointer"
                        style="background: var(--primary); box-shadow: var(--shadow-primary);">
                    Save Settings
                </button>
                <a href="{% url 'inbox:feed' workspace_id=workspace.id %}"
                   class="text-[13px] font-medium text-stone-500 hover:text-stone-700 transition-colors">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}