{% extends "layout.html" %}
{% set pk = view.pk_attr %}
{% block header %}
    <div class="d-flex justify-content-between align-items-center">
        {% block page_title %}<h1>{{ view.menu_label }}</h1>{% endblock %}
        {% block breadcrumbs %}
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url_for(__name__ ~ ':index') }}">{{ _("Admin") }}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ back_url(request, view.key) }}">{{ view.menu_label }}</a>
                </li>
                <li class="breadcrumb-item active">{{ _("Detail") }}</li>
            </ol>
        {% endblock %}
    </div>
{% endblock %}
{% block modal %}
    {{ super() }}
    {% include "modals/loading.html" %}
    {% include "modals/error.html" %}
    {% include "modals/delete.html" %}
    {% include "modals/actions.html" %}
{% endblock %}
{% block content %}
    <div class="row row-deck row-cards">
        {% block detail_before %}
        {% endblock %}
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    {% block detail_title %}
                        <h3 class="card-title">
                            <strong>#{{ obj[pk] }}</strong>
                        </h3>
                    {% endblock %}
                    {% block detail_actions %}
                        <div class="card-actions">
                            {% with pk=obj[pk] %}
                                {% include "row-actions.html" %}
                            {% endwith %}
                        </div>
                    {% endblock %}
                </div>
                {% if view.show_detail_search %}
                    <div class="card-body">
                        <div class="ms-auto text-muted">
                            <div class="ms-2 d-inline-block">
                                <div class="input-icon">
                                    <span class="input-icon-addon">
                                        <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="icon"
                                             width="24"
                                             height="24"
                                             viewBox="0 0 24 24"
                                             stroke-width="2"
                                             stroke="currentColor"
                                             fill="none"
                                             stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <circle cx="10" cy="10" r="7"></circle>
                                            <line x1="21" y1="21" x2="15" y2="15"></line>
                                        </svg>
                                    </span>
                                    <input type="search"
                                           id="searchInput"
                                           value=""
                                           class="form-control"
                                           placeholder="{{ _('Search') }}..."
                                           aria-label="Search in table">
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="card-body">
                    {% block details_table %}
                        <div class="table-responsive">
                            <table class="table table-bordered table-vcenter table-mobile-md">
                                <thead>
                                    <tr>
                                        <th scope="col">{{ _("Attribute") }}</th>
                                        <th scope="col">{{ _("Value") }}</th>
                                    </tr>
                                </thead>
                                <tbody id="tableContent">
                                    {% for field in view.get_fields_list(request) %}
                                        <tr>
                                            <td data-label="Attribute">
                                                <div>
                                                    <strong>{{ field.label }}</strong>
                                                </div>
                                            </td>
                                            <td data-label="Value">
                                                {% with data=obj[field.name] %}
                                                    {% if data == None %}
                                                        {% include field.null_template %}
                                                    {% elif (data | is_iter) and (data |length) ==0 %}
                                                        {% include field.empty_template %}
                                                    {% else %}
                                                        {% include field.detail_template %}
                                                    {% endif %}
                                                {% endwith %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endblock %}
                </div>
            </div>
        </div>
        {% block detail_after %}{% endblock %}
        {% include "inline_detail.html" %}
    </div>
{% endblock %}
{% block head_css %}
    {{ super() }}
    {% for link in view._additional_css_links(request) %}
        <link rel="stylesheet" href="{{ link }}">
    {% endfor %}
{% endblock %}
{% block script %}
    {{ super() }}
    <script type="text/javascript"
            src="{{ static_url(request, 'js/alerts.js', v=2) }}"></script>
    <script type="text/javascript"
            src="{{ static_url(request, 'js/actions.js', v=2) }}"></script>
    <script type="text/javascript"
            src="{{ static_url(request, 'js/utils.js', v=1) }}"></script>
    {% for link in view._additional_js_links(request) %}
        <script type="text/javascript" src="{{ link }}"></script>
    {% endfor %}
    <script type="text/javascript"
            src="{{ static_url(request, 'js/detail.js', v=1) }}"></script>
    {# djlint:off #}
    <script>
        var actionManager = new ActionManager(
            "", // not necessary
            "{{ url_for(__name__ ~ ':row-action', key=view.key)  | safe }}",
            function (query, element) {
                // appendQueryParams
                query.append(
                    "pk",
                    "{{ obj[pk] }}"
                );
            },
            function (actionName, element, msg) {
                // onSuccess
                successAlert(msg);
                window.location.reload();
            },
            function (actionName, element, error) {
                //onError
                dangerAlert(error);
            }
        );

        actionManager.initNoConfirmationActions();
        actionManager.initActionModal();
        {% if view.show_detail_search %}
        $(document).ready(function(){
            $("#searchInput").on("keyup", function() {
              var value = $(this).val().toLowerCase();
              $("#tableContent tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
              });
            });
          });
        {% endif %}
</script>
    {# djlint:on #}
{% endblock %}