{% extends 'base/page.html.j2' %}

{% block page_content %}

  <!-- Master-Detail Split View -->
  <div class="flex h-[calc(100vh-5.5rem)] lg:h-[calc(100vh-3.5rem)] overflow-hidden">

    <!-- Master Pane -->
    <aside id="master-pane"
           class="lg:w-80 w-full shrink-0 border-r overflow-y-auto bg-white lg:block border-gray-200 p-4 dark:bg-gray-800 dark:border-gray-700 {% if mobile_show_details|default(false) -%} hidden{% endif -%}">
           {% block master %}
             <p class="p-4 text-gray-500">Master view (e.g. list/tree)</p>
           {% endblock %}
    </aside>

    <!-- Detail Pane -->

    <section id="detail-pane"
             class="flex-1 flex overflow-y-auto bg-white p-4 lg:block {% if not mobile_show_details|default(false) -%} hidden{%- endif -%} lg:block dark:bg-gray-800">


             {% block detail %}
               <p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
             {% endblock %}
             <div class="lg:hidden h-16 block">
               &nbsp;
             </div>

    </section>
    {% block master_detail_nav %}
      {# mobile navigation for master-detail views #}
      <div class="lg:hidden fixed bottom-0 left-0 z-10 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600">
        <section id="bottom-toolbar"
                 class="flex-1 flex grid grid-cols-2 blace-content-between">
                 <div class="flex w-full justify-start">
                   <sl-tooltip content="Back to list">
                     <sl-icon-button name="caret-left" label="back" id="showMasterBtn" style="font-size: 2.5rem;"></sl-icon-button>
                   </sl-tooltip>
                 </div>
                 <div class="flex w-full justify-end">
                   <sl-tooltip content="Show Details">
                     <sl-icon-button name="caret-right" label="back" id="showDetailsBtn" style="font-size: 2.5rem;"></sl-icon-button>
                   </sl-tooltip>
                 </div>
        </section>
      </div>
    {% endblock %}

  </div>


</div>

<script>
  {%  include '/base/partials/master-detail-nav.js' %}
</script>


{% endblock %}