{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <div class="row max-width-initial">
        <div class="small-12 columns">
            <nav aria-label="You are here:" role="navigation">
                <ul class="breadcrumbs">
                    <li><a href="{{ path('audit_trail') }}">Audit Trail List</a></li>
                    <li>
                        <span class="show-for-sr">Current: </span> Details
                    </li>
                </ul>
            </nav>
            <div class="content-detail-container">
                <div class="row max-width-initial">
                    <div class="large-6 columns">
                        <div class="page-detail-header">Audit Trail Details</div>
                        <div class="page-detail">Date/Time: <span>{{ auditTrail.createdAt }}</span></div>
                        <div class="page-detail">User: <span>{{ auditTrail.userFullName }}</span></div>
                        <div class="page-detail">Transaction: <span>{{ auditTrail.tranLabel }}</span></div>
                        <div class="page-detail">Action: <span>{{ auditTrail.axn }}</span></div>
                    </div>
                </div>
            </div>
            <style>
                .fieldset {
                    margin-bottom: 0;
                    font-size: 14px;
                }
                .fieldset .lgd-collapse {
                    cursor: pointer;
                }
                .fieldset .lgd-collapse a {
                    color: #333333;
                }
            </style>
            {% for key, data in auditTrail.data %}
                {% include '@RxConnexion/AuditTrail/details_data.html.twig' with {key: key, data: data} %}
            {% endfor %}
        </div>
    </div>
    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script>
        //<![CDATA[
        jQ(document).ready(function(){
            jQ('.lgd-collapse').unbind('click').bind('click', function(){
                const i = jQ(this).find('i');
                if(i.hasClass('fa-plus')) {
                    i.removeClass('fa-plus');
                    i.addClass('fa-minus');
                    jQ(jQ(this).parent().children()[1]).show(300);
                } else {
                    i.removeClass('fa-minus');
                    i.addClass('fa-plus');
                    jQ(jQ(this).parent().children()[1]).hide(300);
                }
            });
        });
        //]]>
    </script>
{% endblock %}