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

{% block content %}
{% set breadcrumbs = [
    {'text': _('Admin'), 'url': url_for('admin.admin_dashboard')},
    {'text': _('Link Templates')}
] %}

{{ page_header(
    icon_class='fas fa-link',
    title_text=_('Link Templates'),
    subtitle_text=_('Manage URL templates for client custom fields'),
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("link_templates.create_link_template") + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-plus mr-2"></i>' + _('Create Link Template') + '</a>'
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    {% if templates %}
    <div class="overflow-x-auto">
        <table class="w-full text-left">
            <thead class="border-b border-border-light dark:border-border-dark">
                <tr>
                    <th class="p-4">{{ _('Name') }}</th>
                    <th class="p-4">{{ _('URL Template') }}</th>
                    <th class="p-4">{{ _('Field Key') }}</th>
                    <th class="p-4">{{ _('Icon') }}</th>
                    <th class="p-4">{{ _('Order') }}</th>
                    <th class="p-4">{{ _('Status') }}</th>
                    <th class="p-4">{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for template in templates %}
                <tr class="border-b border-border-light dark:border-border-dark hover:bg-gray-50 dark:hover:bg-gray-800">
                    <td class="p-4">
                        <div class="font-semibold">{{ template.name }}</div>
                        {% if template.description %}
                        <div class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ template.description }}</div>
                        {% endif %}
                    </td>
                    <td class="p-4">
                        <code class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">{{ template.url_template[:50] }}{% if template.url_template|length > 50 %}...{% endif %}</code>
                    </td>
                    <td class="p-4">
                        <span class="text-sm font-mono bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 px-2 py-1 rounded">{{ template.field_key }}</span>
                    </td>
                    <td class="p-4">
                        {% if template.icon %}
                        <i class="{{ template.icon }}"></i>
                        {% else %}
                        <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('None') }}</span>
                        {% endif %}
                    </td>
                    <td class="p-4">{{ template.order }}</td>
                    <td class="p-4">
                        {% if template.is_active %}
                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">{{ _('Active') }}</span>
                        {% else %}
                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200">{{ _('Inactive') }}</span>
                        {% endif %}
                    </td>
                    <td class="p-4">
                        <div class="flex gap-2">
                            <a href="{{ url_for('link_templates.edit_link_template', template_id=template.id) }}" class="text-primary hover:underline">
                                <i class="fas fa-edit"></i> {{ _('Edit') }}
                            </a>
                            <form method="POST" action="{{ url_for('link_templates.delete_link_template', template_id=template.id) }}" class="inline" onsubmit="return confirm('{{ _('Are you sure you want to delete this link template?') }}');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-red-600 dark:text-red-400 hover:underline">
                                    <i class="fas fa-trash"></i> {{ _('Delete') }}
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-12">
        <i class="fas fa-link text-4xl text-text-muted-light dark:text-text-muted-dark mb-4"></i>
        <p class="text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('No link templates found.') }}</p>
        <a href="{{ url_for('link_templates.create_link_template') }}" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors inline-block">
            <i class="fas fa-plus mr-2"></i>{{ _('Create Link Template') }}
        </a>
    </div>
    {% endif %}
</div>

<div class="mt-6 bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <h3 class="text-lg font-semibold mb-4">{{ _('How Link Templates Work') }}</h3>
    <div class="space-y-3 text-sm text-text-muted-light dark:text-text-muted-dark">
        <p>{{ _('Link templates allow you to create quick links to external systems (like ERP systems) using values from client custom fields.') }}</p>
        <p><strong>{{ _('Example:') }}</strong></p>
        <ul class="list-disc list-inside space-y-1 ml-4">
            <li>{{ _('Create a custom field called "debtor_number" on a client') }}</li>
            <li>{{ _('Create a link template with URL:') }} <code class="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">https://erp.example.com/customer/{value}</code></li>
            <li>{{ _('Set the field key to "debtor_number"') }}</li>
            <li>{{ _('When viewing the client, a link will appear that opens the ERP system with the correct customer ID') }}</li>
        </ul>
        <p><strong>{{ _('URL Template Format:') }}</strong> {{ _('Use {value} as a placeholder for the custom field value.') }}</p>
    </div>
</div>
{% endblock %}