{% extends "base.html" %}
{% block content %}
<div class="breadcrumb"><a href="/contacts">Contacts</a><span class="sep">/</span><span>{{ 'Edit' if item else 'New Contact' }}</span></div>
<div class="page-header"><h1 class="page-title">{{ 'Edit Contact' if item else 'New Contact' }}</h1></div>
<div class="card">
<form method="post" action="{{ '/contacts/' ~ item.id ~ '/edit' if item else '/contacts/create' }}">
<div class="form-grid">
    <div class="form-group"><label class="form-label">First Name *</label><input type="text" name="first_name" class="form-input" required value="{{ item.first_name if item else '' }}"></div>
    <div class="form-group"><label class="form-label">Last Name</label><input type="text" name="last_name" class="form-input" value="{{ item.last_name if item and item.last_name else '' }}"></div>
    <div class="form-group"><label class="form-label">Company</label><input type="text" name="company" class="form-input" value="{{ item.company if item and item.company else '' }}"></div>
    <div class="form-group"><label class="form-label">Role</label><input type="text" name="role" class="form-input" value="{{ item.role if item and item.role else '' }}"></div>
    <div class="form-group"><label class="form-label">Email</label><input type="email" name="email" class="form-input" value="{{ item.email if item and item.email else '' }}"></div>
    <div class="form-group"><label class="form-label">Phone</label><input type="tel" name="phone" class="form-input" value="{{ item.phone if item and item.phone else '' }}"></div>
    <div class="form-group full-width"><label class="form-label">Notes</label><textarea name="notes" class="form-textarea" rows="4">{{ item.notes if item and item.notes else '' }}</textarea></div>
    <div class="form-group full-width"><label class="form-label">Tags</label><input type="text" name="tags" class="form-input" value="{{ item.tags|join(', ') if item and item.tags else '' }}"></div>

    <!-- Links -->
    <div class="form-group full-width">
        <label class="form-label">Links</label>
        <div id="contact-links-list">
            {% if linked_links is defined and linked_links %}
                {% for ll in linked_links %}
                <div class="flex gap-2 items-center mb-2 contact-link-row">
                    <select name="link_ids" class="form-select" style="flex:2;">
                        <option value="">Select link...</option>
                        {% for l in all_links %}
                        <option value="{{ l.id }}" {{ 'selected' if l.id|string == ll.id|string }}>{{ l.label }} — {{ l.url[:40] }}{% if l.url|length > 40 %}...{% endif %}</option>
                        {% endfor %}
                    </select>
                    <input type="text" name="link_roles" class="form-input" list="link-roles" placeholder="Role..." value="{{ ll.role or '' }}" style="flex:1;">
                    <button type="button" class="btn btn-ghost btn-xs" style="color:var(--red);" onclick="this.closest('.contact-link-row').remove()">&times;</button>
                </div>
                {% endfor %}
            {% endif %}
        </div>
        <button type="button" class="btn btn-ghost btn-sm" id="add-link-btn">+ Add Link</button>
        <button type="button" class="btn btn-ghost btn-sm" id="add-new-link-btn">+ Create New Link</button>
        <datalist id="link-roles">
            <option value="website">
            <option value="portfolio">
            <option value="social">
            <option value="documentation">
            <option value="reference">
            <option value="profile">
            <option value="repository">
        </datalist>
    </div>

    {% if from_project is defined and from_project %}<input type="hidden" name="from_project" value="{{ from_project }}">{% endif %}
    <div class="form-actions"><button type="submit" class="btn btn-primary">{{ 'Save' if item else 'Create' }}</button><a href="{{ '/projects/' ~ from_project ~ '?tab=contacts' if from_project is defined and from_project else ('/contacts/' ~ item.id if item else '/contacts') }}" class="btn btn-secondary">Cancel</a></div>
</div>
</form></div>

<script>
(function() {
    var linkOpts = '';
    {% if all_links is defined %}
    linkOpts = '<option value="">Select link...</option>' +
        {% for l in all_links %}'<option value="{{ l.id }}">{{ l.label }} — {{ l.url[:40] }}{% if l.url|length > 40 %}...{% endif %}</option>' +{% endfor %}
        '';
    {% endif %}
    document.getElementById('add-link-btn').addEventListener('click', function() {
        var row = document.createElement('div');
        row.className = 'flex gap-2 items-center mb-2 contact-link-row';
        row.innerHTML = '<select name="link_ids" class="form-select" style="flex:2;">' + linkOpts + '</select>' +
            '<input type="text" name="link_roles" class="form-input" list="link-roles" placeholder="Role..." style="flex:1;">' +
            '<button type="button" class="btn btn-ghost btn-xs" style="color:var(--red);" onclick="this.closest(\'.contact-link-row\').remove()">&times;</button>';
        document.getElementById('contact-links-list').appendChild(row);
    });
    document.getElementById('add-new-link-btn').addEventListener('click', function() {
        var row = document.createElement('div');
        row.className = 'flex gap-2 items-center mb-2 contact-link-row';
        row.innerHTML = '<input type="text" name="new_link_labels" class="form-input" placeholder="Label *" required style="flex:1;">' +
            '<input type="text" name="new_link_urls" class="form-input" placeholder="URL *" required style="flex:2;">' +
            '<input type="text" name="new_link_roles" class="form-input" list="link-roles" placeholder="Role..." style="flex:1;">' +
            '<button type="button" class="btn btn-ghost btn-xs" style="color:var(--red);" onclick="this.closest(\'.contact-link-row\').remove()">&times;</button>';
        document.getElementById('contact-links-list').appendChild(row);
    });
})();
</script>
{% endblock %}