{% extends '/layout/admin_layout.html.twig' %}
{% import "macro/listing.html.twig" as listingMacro %}
{% import "limit/macro.html.twig" as limitMacro %}

{% set labels = class_constants('App\\Label\\InventoryLabel') %}

{% block title %}Limit{% endblock %}

{% block content %}

<div class="listing-container">
    <div class="listing-panel">
        <div class="listing-search">
            <form action="{{ path('app_limit_index', app.request.query.all) }}"
                  method="get">
                <div class="input-group me-2 me-lg-3">
                    {% set search = app.request.query.get('search') %}
                    <input type="text" name="search" class="form-control" placeholder="Search" value="{{ search }}">
                    {% if search is not empty %}
                        <a href="{{ path('app_limit_index') }}"
                           class="btn btn-danger btn-sm">
                            Clear
                        </a>
                    {% endif %}
                    <button class="btn btn-primary btn-sm" type="submit">
                        <svg class="icon icon-xs" x-description="Heroicon name: solid/search"
                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                             aria-hidden="true">
                            <path fill-rule="evenodd"
                                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                  clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>

            </form>
        </div>
        <div class="listing-toolbar">
            <div class="btn-toolbar">
                <a href="{{ path('app_limit_new') }}"
                   class="btn btn-sm btn-gray-800 d-inline-flex align-items-center">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add Limit
                </a>
                {{ listingMacro.bulkDeleteButton( path('app_limit_bulk_delete'), csrf_token('delete') ) }}

                <div class="ms-2 ms-lg-3">
                    {% include('components/page_size_choice.html.twig') %}
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow mb-3">
        <div class="card-body p-2">
            <div class="table-wrapper table-responsive">
                <table class="table table-hover">
                    <thead class="thead-light">
                    <tr>
                        <th>{{ listingMacro.listingHeaderCheckbox() }}</th>
                        <th>#</th>
                        <th>{{ listingMacro.sortItem(sort, 'name', 'Name') }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'centerResolution->min', labels.CENTER_RESOLUTION) }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'snr->min', labels.SNR) }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'fom->min', labels.FOM) }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'maxOutputBrightness->min', labels.MAX_OUTPUT_BRIGHTNESS) }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'luminanceGain->min', labels.LUMINANCE_GAIN) }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'ebi->min', labels.EBI) }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'createdAt', 'Created at') }}</th>
                        <th>{{ listingMacro.sortItem(sort, 'createdBy', 'Created by') }}</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for limit in limits %}
                    <tr>
                        <td>{{ listingMacro.listingCheckbox(limit.id)  }}</td>
                        <td>{{ pagination.rowIndex(loop.index) }}</td>
                        <td>
                            <a href="{{ path('app_limit_show', {'id': limit.id}) }}" class="link-primary">
                                <b>{{ limit.name }}</b>
                            </a>
                        </td>
                        <td>
                            {{ limitMacro.range(limit.centerResolution) }}{{ labels.CENTER_RESOLUTION_UNIT|raw }}
                        </td>
                        <td>
                            {{ limitMacro.range(limit.snr) }}
                        </td>
                        <td>
                            {{ limitMacro.range(limit.fom) }}
                        </td>
                        <td>
                            {{ limitMacro.range(limit.maxOutputBrightness) }}{{ labels.MAX_OUTPUT_BRIGHTNESS_UNIT|raw }}
                        </td>
                        <td>
                            {{ limitMacro.range(limit.luminanceGain) }}{{ labels.LUMINANCE_GAIN_UNIT|raw }}
                        </td>
                        <td>
                            {{ limitMacro.range(limit.ebi) }}{{ labels.EBI_UNIT|raw }}
                        </td>
                        <td>{{ limit.createdAt ? limit.createdAt|dtz() : '' }}</td>
                        <td>{{ limit.createdBy.username ?? '' }}</td>
                        <td>
                            <a href="{{ path('app_limit_show', {'id': limit.id}) }}" class="ms-1">
                                <svg class="icon icon-xxs" data-slot="icon" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                                    <path fill-rule="evenodd"
                                          d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
                                          clip-rule="evenodd"/>
                                </svg>
                            </a>
                            <a href="{{ path('app_limit_edit', {'id': limit.id}) }}" class="ms-1">
                                <svg class="icon icon-xxs" data-slot="icon" fill="currentColor" viewBox="0 0 20 20"
                                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"></path>
                                </svg>
                            </a>
                            <form class="d-inline" method="post"
                                  action="{{ path('app_limit_delete', {'id': limit.id}) }}"
                                  onsubmit="return confirm('Are you sure you want to delete this item?');">
                                <input type="hidden" name="_token"
                                       value="{{ csrf_token('delete' ~ limit.id) }}">
                                <button class="btn btn-sm btn-link text-danger ms-1 p-0">
                                    <svg class="icon icon-xs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path clip-rule="evenodd" fill-rule="evenodd"
                                              d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z"></path>
                                    </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                        <tr>
                            <td colspan="100%">no records found</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">{%- include 'components/pagination.html.twig' with { 'pagination': pagination } -%}</div>
    </div>
</div>
{% endblock %}