{% extends "_layouts/cp" %}
{% set title = "Sites"|t('app') %}

{% set multiple = (sites|length > 1) %}
{% set canSort = group and multiple %}


{% block actionButton %}
    {% set newSiteUrl = url('settings/sites/new', (group ? { groupId: group.id } : null)) %}
    <a href="{{ newSiteUrl }}" class="btn submit add icon">{{ "New site"|t('app') }}</a>
{% endblock %}


{% block sidebar %}
    <nav>
        <ul id="groups">
            <li><a href="{{ url('settings/sites') }}"{% if not group %} class="sel"{% endif %}>{{ "All Sites"|t('app') }}</a></li>
            {% for g in allGroups %}
                <li><a href="{{ url('settings/sites', {groupId: g.id}) }}"{% if group and g.id == group.id %} class="sel"{% endif %} data-id="{{ g.id }}">{{ g.name|t('site') }}</a></li>
            {% endfor %}
        </ul>
    </nav>

    <div class="buttons">
        <div id="newgroupbtn" class="btn add icon">{{ "New group"|t('app') }}</div>

        {% if group %}
            <div id="groupsettingsbtn" class="btn settings icon menubtn" title="{{ 'Settings' }}"></div>
            <div class="menu">
                <ul>
                    <li><a data-action="rename" role="button">{{ "Rename selected group"|t('app') }}</a></li>
                    <li><a data-action="delete" role="button"{% if sites|length %} class="disabled" title="{{ 'You can only delete groups that have no sites.'|t('app') }}"{% endif %}>{{ "Delete selected group"|t('app') }}</a></li>
                </ul>
            </div>
        {% endif %}
    </div>
{% endblock %}


{% block content %}
    <table id="sites" class="data fullwidth collapsible">
        <thead>
            <th scope="col">{{ "Name"|t('app') }}</th>
            <th scope="col">{{ "Handle"|t('app') }}</th>
            <th scope="col">{{ "Language"|t('app') }}</th>
            <th scope="col">{{ "Primary"|t('app') }}</th>
            <th scope="col">{{ "Base URL"|t('app') }}</th>
            {% if not group %}
                <th scope="col">{{ "Group"|t('app') }}</th>
            {% endif %}
            {% if canSort %}
                <td class="thin"></td>
            {% endif %}
            {% if multiple %}
                <td class="thin"></td>
            {% endif %}
        </thead>
        <tbody>
            {% for site in sites %}
                <tr data-id="{{ site.id }}" data-name="{{ site.name|t('site') }}">
                    <th scope="row" data-title="{{ 'Name'|t('app') }}"><a href="{{ url('settings/sites/' ~ site.id) }}">{{ site.name|t('site') }}</a></th>
                    <td data-title="{{ 'Handle'|t('app') }}"><code>{{ site.handle }}</code></td>
                    <td data-title="{{ 'Language'|t('app') }}"><code>{{ site.language }}</code></td>
                    <td data-title="{{ 'Primary'|t('app') }}">{% if site.primary %}<div data-icon="check"></div>{% endif %}</td>
                    <td data-title="{{ 'Base URL'|t('app') }}"><code>{{ site.baseUrl }}</code></td>
                    {% if not group %}
                        <td data-title="{{ 'Group'|t('app') }}">{{ site.group.name|t('site') }}</td>
                    {% endif %}
                    {% if canSort %}
                        <td class="thin"><a class="move icon" title="{{ 'Reorder'|t('app') }}" role="button"></a></td>
                    {% endif %}
                    {% if multiple %}
                        <td class="thin"><a class="delete icon{% if site.primary %} disabled{% endif %}" title="{{ 'Delete'|t('app') }}" role="button"></a></td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}


{% js on ready %}
    new Craft.SitesAdmin();

    new Craft.SiteAdminTable({
        tableSelector: '#sites',
        minItems: 1,
        sortable: true,
        reorderAction: 'sites/reorder-sites',
        deleteAction: 'sites/delete-site',
    });
{% endjs %}
