var frame_template = `

<header class="navbar navbar-dark sticky-top flex-md-nowrap p-0 text-center">

  <a class="navbar-brand d-none d-md-block" href="#" style="margin-left: 4em">
    <img src="img/logo.svg" style="height:3em;padding:0.2em">
  </a>


  <div class="col-md-3 col-lg-2 me-0"></div>

  <button id="menu_button" class="position-absolute" onclick="toggle_sidebar()" type="button" style="background:#444444;border:0;padding: 1.5em">
      <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-nav">
    <div class="nav-item text-nowrap d-flex pe-4">
        <a id="profil_nav" class="nav-item nav-link" href="#profil" style="padding-top: 1.5em;">{{it.username | safe}}</a>
        <a class="nav-link px-3" onclick="do_logout()"><img class="profile_pic" src="{{it.userpic | safe}}"></a>
    </div>
  </div>

</header>


<style>
  .sidebar_text{
    display: none;
  }


  .profile_pic{
    height: 3.5em;
    width: 3.5em;
     border-radius: 50%;
  }

  #main_div{
    background-color:white !important;
    box-shadow: 10px 20px 15px silver;
    border-radius: 20px;
  }


  .mw{
    width: auto;
    margin-left: 20em;
    margin-right: 15.5em;
  }



  @media only screen and (max-width: 2000px) {
  .mw {
    margin-left: 8em;
    margin-right: 3.5em;
    }
  }

  @media only screen and (max-width: 1200px) {
  .mw {
    margin-left: 5em;
    margin-right: 0.5em;
    }
  }

  @media only screen and (max-width: 767px) {
    .sidebar{
      width: 100%;
    }
  }

  .sidebar_small{
    width: 4.5em;
  }

  .sidebar{
    z-index: 1001;
  }

</style>

<script>
  function toggle_sidebar(){
    if( $( "#sidebarMenu" ).hasClass( "sidebar_small" )){
      $("#sidebarMenu").removeClass("sidebar_small");
      $(".sidebar_text").show();
    }else{
      $("#sidebarMenu").addClass("sidebar_small");
      $(".sidebar_text").hide();
    }
  }

</script>



<nav id="sidebarMenu" class="d-md-block sidebar sidebar_small" style="min-height: calc(100vh - 2.5rem);position:fixed;">
  <div class="pt-3" >
    <ul class="nav flex-column">

      <!--
      <li id="search_nav" class="nav-item">
        <a class="nav-link active" href="#search"><img src="img/sidebar/search.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Suche</span></a>
      </li>
      -->

      <li id="home_nav" class="nav-item">
        <a class="nav-link active" href="#home"><img src="img/sidebar/home.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Übersicht</span></a>
      </li>

      <li id="inbox_nav" class="nav-item">
        <a class="nav-link active" href="#inbox"><img src="img/sidebar/inbox.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Aktuelles</span></a>
      </li>

      <li id="projects_nav" class="nav-item">
        <a class="nav-link" href="#projects"><img src="img/sidebar/project.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Projekte</span></a>
      </li>
      <li id="orders_nav" class="nav-item">
        <a class="nav-link" href="#orders"><img src="img/sidebar/order.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Aufträge</span></a>
      </li>
      <li id="bills_nav" class="nav-item">
        <a class="nav-link" href="#bills"><img src="img/sidebar/bill.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Rechnungen</span></a>
      </li>


      <li id="calendar_nav" class="nav-item">
        <a class="nav-link" href="#calendar"><img src="img/sidebar/calendar.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Kalender</span></a>
      </li>

      <!--
      <li id="archivs_nav" class="nav-item">
        <a class="nav-link" href="#archivs"><img src="img/sidebar/archiv.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Archiv</span></a>
      </li>
      -->

      <li id="team_nav" class="nav-item">
        <a class="nav-link" href="#team"><img src="img/sidebar/team.svg"/> <span class="sidebar_text">&nbsp;&nbsp;Team</span></a>
      </li>

      <li id="faq_nav" class="nav-item mt-5">
        <a class="nav-link" href="#faq"><img src="img/sidebar/faq.svg"/> <span class="sidebar_text">&nbsp;&nbsp;FAQ</span></a>
      </li>



    </ul>
  </div>
</nav>

<div class="container-fluid mw" >

  <div class="row">

    <main class="col-12">

      <div class="mt-3 mb-3 mt-sm-5 mb-sm-5">
        <h2 class="ms-2" style="color: var(--grey_2);">{{it.title | safe }}</h2>
      </div>

      <div id="main_div" class="mb-sm-5 p-sm-5 pt-3">
        {{it.htmlstuff | safe}}
      </div>

    </main>

  </div>
</div>

`;