{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Redirects'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|url }}">{{ 'Settings'|trans }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Redirects'|trans }}</li>
    </ol>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Redirects'|trans }}</h3>
                <p class="card-subtitle">{{ 'Create and manage path-based redirects for the client area.'|trans }}</p>
            </div>
        </div>
        <div class="card-body border-bottom">
            <h4 class="card-title mb-2">{{ 'Create New Redirect'|trans }}</h4>
            <p class="text-secondary mb-4">{{ 'Use a relative client-area path as the source, then point it to another client path or a full external URL.'|trans }}</p>
            <form method="post" action="{{ 'redirect/create'|api_url }}" {{ fb_api_form({reload: true}) }}>
                <div class="row g-3 align-items-end">
                    <div class="col-xl-5">
                        <label class="form-label required" for="path">{{ 'Path'|trans }}</label>
                        <div class="input-group input-group-flat">
                            <span class="input-group-text">
                                {{ ''|url(area: 'client') }}
                            </span>
                            <input type="text" class="form-control ps-0" name="path" id="path" placeholder="old-page">
                        </div>
                    </div>
                    <div class="col-xl-5">
                        <label class="form-label required" for="target">{{ 'Target'|trans }}</label>
                        <div class="input-group input-group-flat">
                            <span class="input-group-text">
                                {{ ''|url(area: 'client') }}
                            </span>
                            <input type="text" class="form-control ps-0" name="target" id="target" placeholder="{{ 'e.g. new-page or https://example.com'|trans }}">
                        </div>
                    </div>
                    <div class="col-xl-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary">
                            <svg class="icon me-2">
                                <use xlink:href="#plus" />
                            </svg>
                            {{ 'Add'|trans }}
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table card-table table-vcenter table-striped">
                <thead>
                <tr>
                    <th>{{ 'Path'|trans }}</th>
                    <th class="w-1"></th>
                    <th>{{ 'Target'|trans }}</th>
                    <th class="w-1 text-end">{{ 'Actions'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% set redirects = admin.redirect_get_list({ 'per_page': 100, 'page': request.page }|merge(request)) %}
                {% for r in redirects %}
                    <tr>
                        <td>
                            <a href="{{ r.path|url(area: 'client') }}" target="_blank">{{ r.path|url(area: 'client') }}</a>
                        </td>
                        <td>
                            <svg class="icon">
                                <use xlink:href="#arrow-right" />
                            </svg>
                        </td>
                        <td>
                            {% if '://' in r.target %}
                                <a href="{{ r.target }}" target="_blank">{{ r.target }}</a>
                            {% else %}
                                <a href="{{ r.target|url(area: 'client') }}" target="_blank">{{ r.target|url(area: 'client') }}</a>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a class="btn btn-icon" href="{{ 'redirect/delete'|api_url(query: { 'id': r.id }) }}"
                                {{ fb_api_link({modal: {type: 'danger', title: 'Are you sure?'|trans, button: 'Delete'|trans}, reload: true}) }}>
                                <svg class="icon">
                                    <use xlink:href="#delete" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td class="text-center text-muted py-4" colspan="4">{{ 'No redirects have been created yet.'|trans }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
