{% extends "base.html" %}
{% load domain_tags %}

{% block title %}Domain Management{% endblock %}

{% block extra_head %}
<style>
.domains-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.domains-table th { background: #f5f5f5; padding: 10px; text-align: left; border-bottom: 2px solid #ddd; }
.domains-table td { padding: 10px; border-bottom: 1px solid #eee; }
.domain-action-icon { display: inline-block; margin-right: 12px; font-size: 1.1em; }
@media (max-width: 700px) {
  .content-well { box-sizing: border-box; margin-inline: 12px; padding: 16px 12px; }
  .domains-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .domains-table th:first-child, .domains-table td:first-child { min-width: 180px; }
  .domain-action-icon { align-items: center; display: inline-flex; justify-content: center; margin-right: 4px; min-height: 44px; min-width: 44px; }
}
</style>
{% endblock %}

{% block content %}
<div class="content-well clearfix">
    <h3>{% if user.is_superuser %}All Domains{% else %}Your Domains{% endif %}</h3>
    
    {% if user_domains %}
        <table class="domains-table">
            <thead>
                <tr>
                    <th>Domain</th>
                    <th>Language</th>
                    <th>Permissions</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for domain_user in user_domains %}
                <tr>
                    <td>
                        <a href="{% internal_origin domain_user.site.domain %}" target="_blank">{{ domain_user.site.domain }}</a>
                    </td>
                    <td>
                        {% if domain_user.site.domain_settings %}
                            {{ domain_user.site.domain_settings.language }}
                        {% else %}
                            —
                        {% endif %}
                    </td>
                    <td>
                        {% if domain_user.can_edit_pages %}Edit{% endif %}
                        {% if domain_user.can_manage_domain %}{% if domain_user.can_edit_pages %}, {% endif %}Admin{% endif %}
                    </td>
                    <td>
                        <a href="{% internal_origin domain_user.site.domain %}{% url 'domains:dashboard' %}" class="admin-link domain-action-icon" title="Dashboard">
                            <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
                        </a>
                        {% if domain_user.can_manage_domain %}
                            <a href="{% internal_origin domain_user.site.domain %}{% url 'domains:settings_edit' %}" class="admin-link domain-action-icon" title="Settings">
                                <i class="fa-solid fa-gear" aria-hidden="true"></i>
                            </a>
                        {% endif %}
                        {% if domain_user.can_edit_pages or domain_user.can_manage_domain %}
                            <a href="{% internal_origin domain_user.site.domain %}{% url 'translations:list' %}" class="admin-link domain-action-icon" title="Translations">
                                <i class="fa-solid fa-language" aria-hidden="true"></i>
                            </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>You don't have access to any domains yet.</p>
    {% endif %}
</div>
{% endblock %}