{% extends '@ibexadesign/ui/layout.html.twig' %}

{% trans_default_domain 'ibexa_linkmanager' %}

{%- block breadcrumbs -%}
    {% include '@ibexadesign/ui/breadcrumbs.html.twig' with { items: [
        { value: 'breadcrumb.admin'|trans(domain='messages')|desc('Admin') },
        { value: 'url.breadcrumb.list'|trans|desc('URL management'), url: path('ibexa.url_management') },
        { value: 'url.breadcrumb.detail'|trans|desc('Link details') }
    ]} %}
{%- endblock -%}

{% block header %}
    {% include '@ibexadesign/ui/page_title.html.twig' with {
        title: url.url|u.truncate(60),
    } %}
{% endblock %}

{% block title %}
    {{ 'url.view'|trans({ '%url%': url.url|u.truncate(60) })|desc('Link %url%') }}
{% endblock %}

{% block body_class %}ibexa-link-manager-view{% endblock %}

{%- block content -%}
    <section class="container ibexa-container">
        <table class="ibexa-table table ibexa-table--list">
            <thead>
                <tr>
                   <th class="ibexa-table__cell ibexa-table__cell--header" colspan="2">
                       {{ 'url.tab.information'|trans|desc('Details') }}
                   </th>
                </tr>
            </thead>
            <tbody>
                <tr class="ibexa-table__row">
                    <td class="ibexa-table__cell">{{ 'url.label.address'|trans|desc('Address') }}</td>
                    <td class="ibexa-table__cell ibexa-table__cell--has-action-btns">
                        <a href="{{ url.url }}" target="_blank">{{ url.url }}</a>
                        <a href="{{ path('ibexa.link_manager.edit', { urlId: url.id }) }}"
                           class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text mx-2 float-right"
                           title="{{ 'url.action.edit'|trans|desc('Edit') }}">
                            <svg class="ibexa-icon ibexa-icon--small ibexa-icon--edit">
                                <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
                            </svg>
                        </a>
                    </td>
                </tr>
                <tr class="ibexa-table__row">
                    <td class="ibexa-table__cell">{{ 'url.label.status'|trans|desc('Status') }}</td>
                    <td class="ibexa-table__cell">{{
                    url.isValid
                        ? 'url.status.valid'|trans|desc('Valid')
                        : 'url.status.invalid'|trans|desc('Invalid')
                }}</td>
                </tr>
                <tr class="ibexa-table__row">
                    <td class="ibexa-table__cell">{{ 'url.label.last_checked'|trans|desc('Last checked') }}</td>
                    <td class="ibexa-table__cell">
                        {% if url.lastChecked %}
                            {{ url.lastChecked|ibexa_full_datetime }}
                        {% else %}
                            {{ 'url.label.last_checked.never'|trans|desc('This URL has not been checked') }}
                        {% endif %}
                    </td>
                </tr>
                <tr class="ibexa-table__row">
                    <td class="ibexa-table__cell">{{ 'url.label.created'|trans|desc('Created') }}</td>
                    <td class="ibexa-table__cell">{{ url.created|ibexa_full_datetime }}</td>
                </tr>
                <tr class="ibexa-table__row">
                    <td class="ibexa-table__cell">{{ 'url.label.modified'|trans|desc('Modified') }}</td>
                    <td class="ibexa-table__cell">{{ url.modified|ibexa_full_datetime }}</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section class="container ibexa-container mt-5">
        {% set body_rows = [] %}
        {% for content in usages %}
            {% set body_row_cols = [] %}
            {% set view_url = path('ibexa.content.view', { contentId: content.id }) %}

            {% set col_raw %}
                <a href="{{ view_url }}">
                    {{ ibexa_content_name(content) }}
                </a>
            {% endset %}
            {% set body_row_cols = body_row_cols|merge([{
                content: col_raw,
                raw: true,
            }]) %}

            {% set body_row_cols = body_row_cols|merge([{
                content: content.published
                    ? 'url.usages.content_status.published'|trans|desc('Published')
                    : 'url.usages.content_status.draft'|trans|desc('Draft'),
            }]) %}

            {% set col_raw %}
                {% if can_edit %}
                    <button
                        class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--content-edit"
                        title="{{ 'url.action.item.edit'|trans|desc('Edit') }}"
                        data-content-id="{{ content.id }}"
                        data-language-code="{{ content.mainLanguageCode }}"
                    >
                        <svg class="ibexa-icon ibexa-icon--small ibexa-icon--edit">
                            <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
                        </svg>
                    </button>
                {% endif %}
            {% endset %}
            {% set body_row_cols = body_row_cols|merge([{
                has_action_btns: true,
                content: col_raw,
                raw: true,
            }]) %}

            {% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %}
        {% endfor %}

        {% include '@ibexadesign/ui/component/table/table.html.twig' with {
            headline: 'url.tab.usages'|trans({'%count%': usages.nbResults })|desc('Content item(s) using this URL'),
            head_cols: [
                { content: 'url.usages.column.name'|trans|desc('Name') },
                { content: 'url.usages.column.status'|trans|desc('Status') },
                { },
            ],
            body_rows,
        } %}

        {% if usages.haveToPaginate %}
            <div class="row justify-content-center align-items-center ibexa-pagination__spacing mb-5">
                {{ pagerfanta(usages, 'ibexa') }}
            </div>
        {% endif %}

        {{ form_start(form_edit, {
            'action': path('ibexa.content.edit'),
            'attr': { 'class': 'ibexa-edit-content-form'}
        }) }}
            {{ form_widget(form_edit.language, {'attr': {'hidden': 'hidden', 'class': 'language-input'}}) }}
        {{ form_end(form_edit) }}
    </section>
{%- endblock -%}

{% block javascripts %}
    {{ encore_entry_script_tags('ibexa-admin-ui-link-manager-view-js', null, 'ibexa') }}
{% endblock %}