
import os

content = """{% extends 'custom_admin/base.html' %}
{% block title %}Employers Management{% endblock %}
{% block content %}
<!-- Compact Hero Header -->
<div class="relative overflow-hidden rounded-xl mb-4 shadow-xl">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-600 via-rose-500 to-purple-600"></div>
    <div class="relative px-6 py-6">
        <div class="flex flex-col lg:flex-row justify-between items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-white mb-1">Employers Management</h1>
                <p class="text-pink-100 text-sm">Manage employer accounts and verifications</p>
            </div>
            <div class="flex gap-2">
                <div class="bg-white/20 backdrop-blur-sm rounded-lg px-3 py-1.5 border border-white/30">
                    <span class="text-white font-semibold text-lg">{{ page_obj.paginator.count }}</span>
                    <span class="text-pink-100 text-xs ml-1">Total</span>
                </div>
                <a href="{% url 'custom_admin:employers_export_csv' %}"
                    class="px-4 py-1.5 bg-white text-pink-600 rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-1 text-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                        <polyline points="7 10 12 15 17 10" />
                        <line x1="12" y1="15" x2="12" y2="3" />
                    </svg>
                    Export
                </a>
                <a href="{% url 'custom_admin:employer_create' %}"
                    class="px-4 py-1.5 bg-gradient-to-r from-pink-600 to-rose-600 text-white rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-1 text-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2">
                        <path d="M12 5v14M5 12h14"></path>
                    </svg>
                    Create Employer
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Compact Search & Filter -->
<div class="mb-4">
    <div class="bg-white/70 backdrop-blur-xl rounded-xl shadow-lg border border-white/50 p-4">
        <form method="get" class="grid grid-cols-12 gap-3 items-end">
            <div class="col-span-12 lg:col-span-8">
                <label class="block text-xs font-semibold text-gray-700 mb-1">Search</label>
                <input type="text" name="q" value="{{ search_query }}"
                    class="w-full px-4 py-2 text-sm rounded-lg border-2 border-gray-200 bg-white/80 focus:border-pink-500 focus:ring-2 focus:ring-pink-200 transition-all"
                    placeholder="Search employers...">
            </div>
            <div class="col-span-6 lg:col-span-2">
                <label class="block text-xs font-semibold text-gray-700 mb-1">Status</label>
                <select name="verified"
                    class="w-full px-2 py-2 text-sm rounded-lg border-2 border-gray-200 bg-white/80 focus:border-pink-500 focus:ring-2 focus:ring-pink-200 transition-all">
                    <option value="">All</option>
                    <option value="true" {% if verified == 'true' %}selected{% endif %}>Verified</option>
                    <option value="false" {% if verified == 'false' %}selected{% endif %}>Unverified</option>
                </select>
            </div>
            <div class="col-span-6 lg:col-span-2">
                <button type="submit"
                    class="w-full px-4 py-2 text-sm bg-gradient-to-r from-pink-600 to-rose-600 text-white rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all">
                    Search
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Compact Bulk Actions -->
<div id="bulkActions" class="hidden mb-4">
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl shadow-lg p-3">
        <div class="flex items-center justify-between">
            <span class="text-white text-sm font-semibold"><span id="selectedCount">0</span> selected</span>
            <div class="flex items-center gap-2">
                <select id="bulkActionSelect"
                    class="px-3 py-1.5 text-sm rounded-lg border-0 bg-white/20 backdrop-blur-sm text-white font-medium focus:ring-2 focus:ring-white/50">
                    <option value="" class="text-gray-900">Action</option>
                    <option value="verify" class="text-gray-900">Verify</option>
                    <option value="unverify" class="text-gray-900">Unverify</option>
                    <option value="delete" class="text-gray-900">Delete</option>
                </select>
                <button type="button" onclick="applyBulkAction()"
                    class="px-4 py-1.5 text-sm bg-white text-purple-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Compact Cards Grid -->
<form id="bulkForm" method="post" action="{% url 'custom_admin:employers_bulk_action' %}">
    {% csrf_token %}
    <input type="hidden" name="action" id="bulkActionInput">

    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 mb-4">
        {% for employer in page_obj %}
        <div
            class="group bg-white/70 backdrop-blur-xl rounded-lg shadow-lg hover:shadow-xl border border-white/50 overflow-hidden transition-all duration-300 hover:-translate-y-1">
            <div class="h-10 bg-gradient-to-br from-pink-500 via-rose-500 to-purple-600 relative">
                <div class="absolute top-1.5 left-1.5">
                    <input type="checkbox" name="employer_ids" value="{{ employer.id }}"
                        class="employer-checkbox w-3.5 h-3.5 rounded border-2 border-white text-pink-600 focus:ring-pink-500 cursor-pointer">
                </div>
                <div class="absolute top-1.5 right-1.5">
                    {% if employer.is_verified %}
                    <span
                        class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-bold bg-green-500 text-white">✓</span>
                    {% else %}
                    <span
                        class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-bold bg-yellow-500 text-white">!</span>
                    {% endif %}
                </div>
            </div>
            <div class="p-3">
                <h3 class="text-sm font-bold text-gray-900 mb-0.5 group-hover:text-pink-600 transition-colors truncate">
                    {{ employer.company_name }}</h3>
                <p class="text-xs text-gray-500 mb-2 truncate">{{ employer.industry|default:"Not specified" }}</p>
                <div class="space-y-1.5 mb-2 text-xs">
                    <div class="flex items-center gap-1.5 truncate">
                        <svg class="w-3 h-3 text-blue-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        <span class="text-gray-700 truncate">{{ employer.contact_person|default:"Not provided" }}</span>
                    </div>
                    <div class="flex items-center gap-1.5 truncate">
                        <svg class="w-3 h-3 text-green-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                        <span class="text-gray-700 truncate">{{ employer.location|default:"Not specified" }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="px-1.5 py-0.5 rounded bg-purple-50 text-purple-600 font-bold">{{ employer.jobs_count }} jobs</span>
                        <span class="text-gray-500">{{ employer.created_at|date:"M d" }}</span>
                    </div>
                </div>
                <div class="flex gap-1 pt-2 border-t border-gray-100">
                    <a href="{% url 'custom_admin:employer_detail' employer.id %}"
                        class="flex-1 px-2 py-1 text-xs rounded-lg bg-gradient-to-r from-pink-600 to-rose-600 text-white text-center font-semibold hover:from-pink-700 hover:to-rose-700 transition-all">View</a>
                    <a href="{% url 'custom_admin:employer_verify' employer.id %}"
                        class="px-2 py-1 rounded-lg border border-gray-300 hover:border-pink-500 hover:bg-pink-50 text-gray-700 hover:text-pink-600 transition-all">
                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">{% if employer.is_verified %}<path
                                d="M18 6L6 18M6 6l12 12"></path>{% else %}<polyline points="20 6 9 17 4 12"></polyline>
                            {% endif %}</svg>
                    </a>
                    <form method="post" action="{% url 'custom_admin:employer_delete' employer.id %}"
                        style="display:inline;">
                        {% csrf_token %}
                        <button type="submit" onclick="return confirm('Delete this employer?')"
                            class="px-2 py-1 rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition-all border-0 cursor-pointer">
                            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2">
                                <polyline points="3 6 5 6 21 6"></polyline>
                                <path
                                    d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                </path>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-full">
            <div class="bg-white/70 backdrop-blur-xl rounded-xl shadow-lg border border-white/50 p-8 text-center">
                <div
                    class="w-16 h-16 rounded-full bg-gradient-to-br from-pink-100 to-purple-100 flex items-center justify-center mb-4 mx-auto">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-pink-400" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-1">No Employers Found</h3>
                <p class="text-sm text-gray-500 mb-4">Try adjusting your search or filter</p>
                <a href="?"
                    class="inline-block px-4 py-2 text-sm bg-gradient-to-r from-pink-600 to-rose-600 text-white rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all">Clear
                    Filters</a>
            </div>
        </div>
        {% endfor %}
    </div>
</form>

<!-- Compact Pagination -->
{% if page_obj.paginator.num_pages > 1 %}
<div class="bg-white/70 backdrop-blur-xl rounded-xl shadow-lg border border-white/50 p-4">
    <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
        <p class="text-xs text-gray-600">
            {% if page_obj.paginator.count > 0 %}
            <span class="font-bold text-pink-600">{{ page_obj.start_index }}-{{ page_obj.end_index }}</span> of <span
                class="font-bold text-pink-600">{{ page_obj.paginator.count }}</span>
            {% else %}0 of 0{% endif %}
        </p>
        <nav class="flex items-center gap-1">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if verified %}&verified={{ verified }}{% endif %}"
                class="px-3 py-1.5 text-sm rounded-lg bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600 transition-all">
                <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                        clip-rule="evenodd" />
                </svg>
            </a>
            {% endif %}
            {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
            <span
                class="px-3 py-1.5 text-sm rounded-lg bg-gradient-to-r from-pink-600 to-rose-600 text-white font-bold shadow-lg">{{
                num }}</span>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} <a
                href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if verified %}&verified={{ verified }}{% endif %}"
                class="px-3 py-1.5 text-sm rounded-lg bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600 transition-all">
                {{ num }}</a>
                {% endif %}
                {% endfor %}
                {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if verified %}&verified={{ verified }}{% endif %}"
                    class="px-3 py-1.5 text-sm rounded-lg bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600 transition-all">
                    <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
                {% endif %}
        </nav>
    </div>
</div>
{% endif %}

<script>
    const checkboxes = document.querySelectorAll('.employer-checkbox');
    const bulkActions = document.getElementById('bulkActions');
    const selectedCount = document.getElementById('selectedCount');

    checkboxes.forEach(cb => {
        cb.addEventListener('change', function () {
            const count = document.querySelectorAll('.employer-checkbox:checked').length;
            selectedCount.textContent = count;
            bulkActions.classList.toggle('hidden', count === 0);
            bulkActions.classList.toggle('flex', count > 0);
        });
    });

    function applyBulkAction() {
        const action = document.getElementById('bulkActionSelect').value;
        if (!action) return alert('Please select an action');
        if (action === 'delete' && !confirm('Delete selected employers?')) return;
        document.getElementById('bulkActionInput').value = action;
        document.getElementById('bulkForm').submit();
    }
</script>
{% endblock %}"""

file_path = "custom_admin/templates/custom_admin/pages/employers/list_final.html"
with open(file_path, "w", encoding="utf-8") as f:
    f.write(content)

print(f"Written to {file_path}")
