{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}Configuration - PX360{% endblock %}

{% block content %}
<!-- Header -->
<header class="mb-6">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-navy">
                <i data-lucide="settings" class="w-6 h-6 inline-block mr-2"></i>
                {% trans "System Configuration" %}
            </h1>
            <p class="text-sm text-slate mt-1">{% trans "Manage system settings and configurations" %}</p>
        </div>
    </div>
</header>

<!-- Configuration Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- SLA Configurations (Complaint-specific) -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="file-clock" class="w-8 h-8 text-blue-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "Complaint SLA" %}</h3>
        <p class="text-sm text-slate mb-4">{% trans "Manage complaint SLA settings" %}</p>
        <a href="{% url 'complaints:sla_management' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="settings-2" class="w-4 h-4"></i>
            {% trans "Configure SLA" %}
        </a>
    </div>

    <!-- SLA Configurations (General) -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-yellow-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="clock" class="w-8 h-8 text-yellow-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "General SLA" %}</h3>
        <p class="text-sm text-slate mb-4">{{ sla_configs_count }} {% trans "active configs" %}</p>
        <a href="{% url 'config:sla_config_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="settings-2" class="w-4 h-4"></i>
            {% trans "Manage SLA Configs" %}
        </a>
    </div>

    <!-- Routing Rules -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="git-branch" class="w-8 h-8 text-blue-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "Routing Rules" %}</h3>
        <p class="text-sm text-slate mb-4">{{ routing_rules_count }} {% trans "active rules" %}</p>
        <a href="{% url 'config:routing_rules_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="route" class="w-4 h-4"></i>
            {% trans "Manage Routing Rules" %}
        </a>
    </div>

    <!-- Hospitals -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="building-2" class="w-8 h-8 text-green-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "Hospitals" %}</h3>
        <p class="text-sm text-slate mb-4">{{ hospitals_count }} {% trans "active hospitals" %}</p>
        <a href="/admin/organizations/hospital/" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="hospital" class="w-4 h-4"></i>
            {% trans "Manage Hospitals" %}
        </a>
    </div>

    <!-- On-Call Admin Schedules -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="moon" class="w-8 h-8 text-purple-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "On-Call Schedules" %}</h3>
        <p class="text-sm text-slate mb-4">{{ oncall_schedules_count }} {% trans "active schedules" %}</p>
        <a href="{% url 'complaints:oncall_dashboard' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="users" class="w-4 h-4"></i>
            {% trans "Manage On-Call" %}
        </a>
    </div>

    <!-- Call Records -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-pink-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="phone-call" class="w-8 h-8 text-pink-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "Call Records" %}</h3>
        <p class="text-sm text-slate mb-4">{{ call_records_count }} {% trans "records" %}</p>
        <a href="{% url 'callcenter:call_records_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="headphones" class="w-4 h-4"></i>
            {% trans "Manage Call Records" %}
        </a>
    </div>

    <!-- Onboarding -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
        <div class="w-16 h-16 mx-auto mb-4 bg-teal-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="user-plus" class="w-8 h-8 text-teal-600"></i>
        </div>
        <h3 class="font-bold text-navy text-lg mb-2">{% trans "Onboarding" %}</h3>
        <p class="text-sm text-slate mb-4">{{ provisional_users_count }} {% trans "pending users" %}</p>
        <a href="{% url 'accounts:onboarding-dashboard' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
            <i data-lucide="users" class="w-4 h-4"></i>
            {% trans "Manage Onboarding" %}
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Re-initialize Lucide icons after page load
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
{% endblock %}