{% extends "base.html" %}
{% from "components/ui.html" import page_header, breadcrumb_nav %}

{% block title %}{{ 'Edit' if contact else 'Create' }} Contact - {{ config.APP_NAME }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Clients', 'url': url_for('clients.list_clients')},
    {'text': client.name, 'url': url_for('clients.view_client', client_id=client.id)},
    {'text': 'Contacts', 'url': url_for('contacts.list_contacts', client_id=client.id)},
    {'text': 'Edit Contact' if contact else 'Create Contact'}
] %}

{{ page_header(
    icon_class='fas fa-address-book',
    title_text='Edit Contact' if contact else 'Create Contact',
    subtitle_text='Contact for ' + client.name,
    breadcrumbs=breadcrumbs
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="first_name" class="block text-sm font-medium mb-2">{{ _('First Name') }} *</label>
                <input type="text" name="first_name" id="first_name" value="{{ contact.first_name if contact else '' }}" class="form-input" required>
            </div>
            
            <div>
                <label for="last_name" class="block text-sm font-medium mb-2">{{ _('Last Name') }} *</label>
                <input type="text" name="last_name" id="last_name" value="{{ contact.last_name if contact else '' }}" class="form-input" required>
            </div>
            
            <div>
                <label for="email" class="block text-sm font-medium mb-2">{{ _('Email') }}</label>
                <input type="email" name="email" id="email" value="{{ contact.email if contact else '' }}" class="form-input">
            </div>
            
            <div>
                <label for="phone" class="block text-sm font-medium mb-2">{{ _('Phone') }}</label>
                <input type="text" name="phone" id="phone" value="{{ contact.phone if contact else '' }}" class="form-input">
            </div>
            
            <div>
                <label for="mobile" class="block text-sm font-medium mb-2">{{ _('Mobile') }}</label>
                <input type="text" name="mobile" id="mobile" value="{{ contact.mobile if contact else '' }}" class="form-input">
            </div>
            
            <div>
                <label for="title" class="block text-sm font-medium mb-2">{{ _('Title') }}</label>
                <input type="text" name="title" id="title" value="{{ contact.title if contact else '' }}" class="form-input">
            </div>
            
            <div>
                <label for="department" class="block text-sm font-medium mb-2">{{ _('Department') }}</label>
                <input type="text" name="department" id="department" value="{{ contact.department if contact else '' }}" class="form-input">
            </div>
            
            <div>
                <label for="role" class="block text-sm font-medium mb-2">{{ _('Role') }}</label>
                <select name="role" id="role" class="form-input">
                    <option value="contact" {% if contact and contact.role == 'contact' %}selected{% endif %}>{{ _('Contact') }}</option>
                    <option value="primary" {% if contact and contact.role == 'primary' %}selected{% endif %}>{{ _('Primary') }}</option>
                    <option value="billing" {% if contact and contact.role == 'billing' %}selected{% endif %}>{{ _('Billing') }}</option>
                    <option value="technical" {% if contact and contact.role == 'technical' %}selected{% endif %}>{{ _('Technical') }}</option>
                </select>
            </div>
            
            <div class="md:col-span-2">
                <label class="flex items-center">
                    <input type="checkbox" name="is_primary" {% if contact and contact.is_primary %}checked{% endif %} class="mr-2">
                    <span class="text-sm">{{ _('Set as primary contact') }}</span>
                </label>
            </div>
            
            <div class="md:col-span-2">
                <label for="address" class="block text-sm font-medium mb-2">{{ _('Address') }}</label>
                <textarea name="address" id="address" rows="3" class="form-input">{{ contact.address if contact else '' }}</textarea>
            </div>
            
            <div class="md:col-span-2">
                <label for="notes" class="block text-sm font-medium mb-2">{{ _('Notes') }}</label>
                <textarea name="notes" id="notes" rows="4" class="form-input">{{ contact.notes if contact else '' }}</textarea>
            </div>
            
            <div class="md:col-span-2">
                <label for="tags" class="block text-sm font-medium mb-2">{{ _('Tags') }} <span class="text-xs text-text-muted-light dark:text-text-muted-dark">(comma-separated)</span></label>
                <input type="text" name="tags" id="tags" value="{{ contact.tags if contact else '' }}" class="form-input" placeholder="tag1, tag2, tag3">
            </div>
        </div>
        
        <div class="mt-6 flex gap-2">
            <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                {{ _('Save Contact') }}
            </button>
            <a href="{{ url_for('contacts.list_contacts', client_id=client.id) }}" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                {{ _('Cancel') }}
            </a>
        </div>
    </form>
</div>
{% endblock %}