
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
    }

    body{
      background-color: #dee3eb;
      overflow: hidden;
    }
    
    .sample-image {
      width: auto;
    }

    .sample-image-third {
      width: calc(33.33% - .5rem);
    }

    .frame-container {
      padding: 0.5rem 0.5rem 0.5rem 0.5rem;
      box-sizing: border-box;
      flex-flow: column nowrap;
      row-gap: .5rem;
      display: flex;
      height: 100vh;
      justify-content: stretch;
      align-items: stretch;
    }

    .frame-container > div ,
    .frame-container > iframe {
      flex-grow: 1;
    }
    .frame-container > div > iframe{
      height: 100%;
      width: 100%;
    }

    .sample-row{      
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      column-gap: .65rem;
      display: flex;
    }

    @media only screen and (max-width: 1188px) {
        .ae-menubar[aria-orientation=vertical] {
            position: fixed;
            width: 100vw !important;
            margin-left: -100vw;
            transition: all ease .3s;
        }
        .ae-menubar.expanded-mob[aria-orientation=vertical] {
            margin-left: 0;
        }

        #sc-main-content {
            padding-left: 0 !important;
        }
        html[dir=RTL] .ae-menubar[aria-orientation=vertical] {
            margin-left: auto;
            margin-right: -100vw;
        }
        html[dir=RTL] .ae-menubar.expanded-mob[aria-orientation=vertical] {
            margin-left: auto;
            margin-right: 0;
        }

        html[dir=RTL] #sc-main-content {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
  </style>
  <!-- template -->
  <main>
    <div id="sc-main-content" class="vertical-orientation">
      <section class="ae-menubar menubar" role="toolbar" aria-orientation="vertical" tabindex="0" data-aetheme="{{menu_theme}}">
        <div class="wrapper-header">
          <div class="logo"><a id="sc-menu-link-home" href="./"><span class="only-sr">Scriptcase menubar home </span><img
                class="d-block" src="{{logo}}" aria-hidden="true" /><img
                class="d-none" src="{{logo_compact}}" aria-hidden="true" /></a></div>
          <div class="mb_icon fa-solid fa-compress hide-mobile" id="switch-menu-position" aria-label="menu fixo" role="checkbox"
            aria-checked="true"></div>
          <button class="button mob-button show-mobile-flex" style="display: none;" id="close-menu-expand">
              <i class="fas fa-xmark open_menubar_icon"></i>
          </button>
        </div>

          {{header_string_m_placement}}
          <?php
          if ($menu_data['usercheck'] == 'S') {
          ?>
        <div class="wrapper-user">
          <div class="user-info" aria-expanded="false" aria-controls="user-menu">
            <div class="user action-button" role="button" id="user-button" aria-label="ações do usuário"
              aria-expanded="false" aria-controls="user-panel" aria-owns="user-panel">
              <img src="{{userimage}}" class="user_image" />
            </div>
            <div class="group">
              <p class="user-name">{{username}}</p>
              <p class="user-profile">{{userdesc}}</p>
            </div>
          </div>
          <div class="user-menu p-right-4">
            <div class="wrapper" id="user-menu">
              <div class="user-menu-content">
                <div class="section actions ae-menubar-accordion">
                  <ul role="menubar" aria-label="ações do menu do usuário" id="user_menu_list">

                  </ul>

                  <hr class="divider-y divider-solid divider-theme-color my-2" />
                </div>
              </div>
            </div>
          </div>
        </div>
          <?php
          }
          ?>
        <div class="wrapper-navigation ae-menubar-accordion" aria-label="navegação principal">
          <ul role="menubar" aria-label="navegação principal" id="nav_list">
          </ul>
        </div>
      </section>
      <section class="ae-menubar toolbar compact" role="toolbar" aria-orientation="horizontal" tabindex="0" data-aetheme="{{menu_theme}}">
          <div class="wrapper">
              <button class="button expand-button mob-button show-mobile-flex" style="display: none;">
                  <i class="fas fa-bars open_menubar_icon"></i>
              </button>
              {{header_string_h_placement}}
              <div class="bar-spacer"></div>
          <div class="toolbar" role="toolbar" aria-orientation="horizontal" aria-label="barra de ações">
            <div class="group actions" role="group">
                <?php
                if(isset($menu_data['tb_items']) && !empty($menu_data['tb_items'])) {
                    foreach ($menu_data['tb_items'] as $_tb_item) {
                        if (isset($_tb_item['display']) && $_tb_item['display']=='S' && isset($_tb_item['app']) && $_tb_item['app'] == 'search') {
                            ?>
                            <button class="button action-button" id="search-button"
                                    aria-label="pesquisar" aria-expanded="false" value="search" aria-controls="search-panel"
                                    aria-owns="search-panel"><i class="mb_icon lni lni-search-alt"
                                                                aria-hidden="true"></i></button>
                            <?php
                        }
                        elseif (isset($_tb_item['display']) && $_tb_item['display']=='S' && isset($_tb_item['app']) && $_tb_item['app'] == 'languages') {
                            ?>
                            <button class="button action-button" id="translate-button"
                                    aria-label="idiomas" aria-expanded="false" value="translate" aria-controls="translate-panel"
                                    aria-owns="translate-panel"><i class="mb_icon lni lni-world" aria-hidden="true"></i></button>
                            <?php
                        }
                        elseif (isset($_tb_item['display']) && $_tb_item['display']=='S' && isset($_tb_item['app']) && $_tb_item['app'] == 'themes') {
                            ?>
                            <button class="button action-button"
                                    id="themes-button" aria-label="temas" aria-expanded="false" value="themes" aria-controls="themes-panel"
                                    aria-owns="themes-panel"><i class="mb_icon lni lni-paint-roller" aria-hidden="true"></i></button>
                            <?php
                        }
                        elseif (isset($_tb_item['display']) && $_tb_item['display']=='S' && isset($_tb_item['app']) && $_tb_item['app'] == 'notification') {
                            ?>
                            <button
                                    class="button action-button" id="notifications-button" aria-label="notificações" aria-expanded="false"
                                    value="notifications" aria-controls="notifications-panel" aria-owns="notifications-panel"><i
                                        class="mb_icon lni lni-popup" aria-hidden="true"></i></button>
                            <?php
                        }
                        elseif (isset($_tb_item['display']) && $_tb_item['display']=='S' && isset($_tb_item['app']) && $_tb_item['app'] == 'shortcuts') {
                            ?>
                            <button
                                    class="button action-button" id="shortcuts-button" aria-label="ações rápidas" aria-expanded="false"
                                    value="shortcuts" aria-controls="shortcuts-panel" aria-owns="shortcuts-panel"><i
                                        class="mb_icon lni lni-grid-alt" aria-hidden="true"></i></button>
                            <?php
                        }
                    }
                }
                 ?>
            </div>
          </div>
        </div>
          {{themes-panel}}
          {{languages-panel}}
          {{fav-panel}}
          {{search-panel}}
      </section>
        <section class="ae-menubar tabsbar" data-aetheme="{{menu_theme}}" style="" aria-orientation="horizontal">
            {{tabs_placement}}
        </section>
        {{breadcrumbs_placement}}
      <div class="frame-container" id="app-frames" data-aetheme="{{menu_theme}}">
        <iframe class="nm_frame_app" name="nm_frame_app" src="" frameborder="0"></iframe>
          <div class="loader-placeholder"><div class="lds-dual-ring"></div></div>
      </div>
    </div>
  </main>