{% extends "base.html" %}

{% block title %}Lawyers - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">Lawyers</h1>
    <p class="text-gray-600">Law firms and attorneys representing claimants</p>
</div>

<!-- Search Bar -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" action="{{ url_for('lawyers_list') }}" class="flex gap-4">
        <input type="text" 
               name="search" 
               value="{{ search }}" 
               placeholder="Search by lawyer name or firm..." 
               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-search mr-2"></i>Search
        </button>
        {% if search %}
        <a href="{{ url_for('lawyers_list') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-times mr-2"></i>Reset
        </a>
        {% endif %}
    </form>
</div>

<!-- Lawyers Grid -->
<!-- Add Lawyer Button -->
<div class="mb-6">
    <a href="{{ url_for('lawyer_new') }}" 
       class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold transition">
        <i class="fas fa-plus mr-2"></i>Add Lawyer
    </a>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% if lawyers %}
        {% for lawyer in lawyers %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
            <div class="bg-gradient-to-r from-indigo-400 to-indigo-500 px-6 py-4">
                <h3 class="text-white font-bold text-lg">
                    {{ lawyer['first_name'] }} {{ lawyer['last_name'] }}
                </h3>
                {% if lawyer['title'] %}
                <p class="text-indigo-100 text-sm">{{ lawyer['title'] }}</p>
                {% endif %}
                {% if lawyer['status'] %}
                <p class="text-indigo-100 text-sm">{{ lawyer['status'] }}</p>
                {% endif %}
            </div>
            <div class="p-6">
                <div class="space-y-3 mb-4">
                    {% if lawyer['firm_name'] %}
                    <p class="text-sm font-semibold text-gray-800">
                        <i class="fas fa-building mr-2 text-indigo-500"></i>
                        {{ lawyer['firm_name'] }}
                    </p>
                    {% endif %}
                    
                    {% if lawyer['firm_city'] %}
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-map-marker-alt mr-2 text-indigo-500"></i>
                        {{ lawyer['firm_city'] }}
                    </p>
                    {% endif %}
                    
                    {% if lawyer['firm_phone'] %}
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-phone mr-2 text-indigo-500"></i>
                        {{ lawyer['firm_phone']|format_phone }}
                    </p>
                    {% endif %}
                    
                    {% if lawyer['direct_number'] %}
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-phone-alt mr-2 text-indigo-500"></i>
                        {{ lawyer['direct_number'] }}{% if lawyer['ext'] %} ext. {{ lawyer['ext'] }}{% endif %}
                    </p>
                    {% endif %}
                    
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-folder mr-2 text-indigo-500"></i>
                        <span class="font-semibold">{{ lawyer['case_count'] or 0 }}</span> case(s)
                    </p>
                </div>
                
                <!-- Actions -->
                <div class="flex justify-end gap-2 pt-4 border-t">
                    <a href="{{ url_for('lawyer_edit', lawyer_id=lawyer['id']) }}" 
                       class="text-indigo-600 hover:text-indigo-800 text-sm font-semibold">
                        <i class="fas fa-edit mr-1"></i>Edit
                    </a>
                    <form method="POST" 
                          action="{{ url_for('lawyer_delete', lawyer_id=lawyer['id']) }}" 
                          onsubmit="return confirm('Are you sure you want to delete this lawyer?');"
                          style="display: inline;">
                        <button type="submit" class="text-red-600 hover:text-red-800 text-sm font-semibold">
                            <i class="fas fa-trash mr-1"></i>Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="col-span-full bg-white rounded-lg shadow-md p-12 text-center">
            <i class="fas fa-balance-scale text-6xl text-gray-300 mb-4"></i>
            <p class="text-xl text-gray-500">No lawyers found</p>
        </div>
    {% endif %}
</div>
{% endblock %}