{% extends 'layouts/base.njk' %}

{% set title = app.name + ' - Shrink URL' %}

{% block scripts %}
    <script src="/js/url-shrinker.js"></script>
{% endblock %}

{% block body %}
    <h1>Shrink URLs</h1>
    <p>For security reasons, shrinked URLs cannot be deleted.</p>

    <div class="container">
        <section class="panel">
            <h2><i data-feather="crosshair"></i> Shrink a URL</h2>

            <form action="{{ route('shrink-url') }}" method="POST" id="url-shrink-form">
                {{ macros.field(_locals, 'text', 'target_url', '', 'Target URL', 'Only valid URLs starting with http:// or https://', validation_attributes='required') }}

                {{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: bear sets url to https://'+default_domain+'/bear', validation_attributes='disabled') }}
                {{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}

                {{ macros.csrf(getCsrfToken) }}

                <button type="submit"><i data-feather="link"></i> Shrink URL</button>
            </form>

            {% set url = flash('url') %}
            {% if url | length %}
                <div class="copyable-text">
                    <div class="title">URL</div>
                    <div class="content">{{ url }}</div>
                    <button class="copy-button"><i data-feather="copy"></i></button>
                </div>
            {% endif %}
        </section>


        <section class="panel">
            <h2><i data-feather="link"></i> URL list</h2>

            {{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}

            <table class="data-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th class="table-col-grow">URL</th>
                    <th>Target</th>
                </tr>
                </thead>

                <tbody>
                {% for url in urls %}
                    <tr>
                        <td>{{ url.id }}</td>
                        <td>
                            <div class="copyable-text">
                                <a class="content" href="{{ url.getURL() }}" target="_blank">{{ url.getURL() }}</a>
                                <button class="copy-button"><i data-feather="copy"></i></button>
                            </div>
                        </td>
                        <td><pre>{{ url.target_url }}</pre></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            {{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
        </section>
    </div>
{% endblock %}