<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

  <div t-name="web.web_client" class="o_web_client">
    <t t-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" />
    <t t-widget="HomeMenu" t-if="state.inHome" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}" />
    <div class="o_content" t-att-class="state.inHome ? 'o_hidden' : ''" t-ref="content"/>
    <div class="o_notification_container">
      <t t-foreach="state.notifications" t-as="notif">
        <t t-widget="Notification" t-props="notif"/>
      </t>
    </div>
    <div class="o_loading d-none" t-ref="loading_indicator">Loading</div>
  </div>

  <div t-name="web.navbar" class="o_navbar" t-att-class="props.inHome ? 'o_in_home' : ''">
    <a aria-label="Applications" t-if="!props.inHome || props.app" class="o_title fa" t-att-class="props.inHome ? 'fa-chevron-left' : 'fa-th'" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
    <t t-if="!props.inHome &amp;&amp; props.app">
      <a class="o_menu_brand" t-att-href="getUrl(props.app)" role="button" t-on-click="openMenu(props.app)">
        <t t-esc="props.app.name"/>
      </a>
      <ul class="o_menu_sections">
        <li t-foreach="props.app.children" t-as="menu">
          <t t-if="menu.children.length === 0">
            <a t-att-href="getUrl(menu)" role="menuitem" t-on-click="openMenu(menu)">
              <span>
                <t t-esc="menu.name"/>
              </span>
            </a>
          </t>
          <t t-else="1">
            <a href="#" role="button" class="dropdown-toggle o-no-caret" data-toggle="dropdown">
              <span>
                <t t-esc="menu.name"/>
              </span>
            </a>
            <div class="dropdown-menu" role="menu">
              <t t-foreach="menu.children" t-as="submenu">
                <a t-att-href="getUrl(submenu)" data-toggle="collapse" data-target="#someid" role="menuitem" class="dropdown-item" t-on-click="openMenu(submenu)">
                  <span>
                    <t t-esc="submenu.name"/>
                  </span>
                </a>
              </t>
            </div>
          </t>
        </li>
        <li t-if="env.isMobile">MOBILEMODE</li>
      </ul>
    </t>
  </div>

  <div t-name="web.control_panel" class="o_control_panel">
    <ol class="breadcrumb" role="navigation">
      <li class="breadcrumb-item active">
        <t t-esc="props.title"/>
      </li>
    </ol>
    <div class="o_cp_searchview" role="search">
      <t t-call="web.search_view"/>
    </div>
    <div class="o_cp_left">
      <div class="o_cp_buttons" role="toolbar" aria-label="Control panel toolbar"/>
      <aside class="o_cp_sidebar"/>
    </div>
    <div class="o_cp_right">
      <div class="btn-group o_search_options" role="search"/>
      <nav class="o_cp_pager" role="search" aria-label="Pager"/>
      <nav class="btn-group o_cp_switch_buttons" role="toolbar" aria-label="View switcher"/>
    </div>
  </div>

  <div t-name="web.search_view" class="o_searchview" role="search" aria-autocomplete="list">
    <span class="o_searchview_more fa" title="Advanced Search..." role="img" aria-label="Advanced Search..."/>
  </div>

  <div t-name="web.base_view" class="o_view_controller">
    <t t-widget="ControlPanel" t-props="{title: props.title}"/>
    <div class="o_content">
      <span t-esc="viewType"/>
    </div>
  </div>

  <div t-name="web.home_menu" class="o_home_menu">
    <div class="o_apps">
      <a t-foreach="apps" t-as="app" t-att-href="'#menu_id=' + app.id + '&amp;action_id=' + app.actionId" class="o_app" t-on-click="openMenu(app)" t-att-data-menu="app.id">
        <i t-att-class="app.icon + ' o_app_icon fa-3x fa-fw'"/>
        <div class="o_caption">
          <t t-esc="app.name"/>
        </div>
      </a>
    </div>
  </div>

  <div t-name="web.notification" class="o_notification" t-att-class="props.type === 'warning' ? 'o_error' : ''">
    <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close" t-on-click="close"/>
    <div class="o_notification_title">
      <span t-attf-class="o_icon fa fa-3x {{icon}}" role="img" t-attf-aria-label="Notification {{props.title}}" t-attf-title="Notification {{props.title}}"/>
      <t t-raw="props.title"/>
    </div>
    <div class="o_notification_content" t-if="props.message.length">
      <t t-raw="props.message"/>
    </div>
  </div>

  <div t-name="web.discuss" class="o_discuss">
    <t t-widget="ControlPanel" t-props="{title: 'Discuss'}"/>
    <div class="o_content">
      <div class="o_discuss_sidebar">
        <span>DISCUSS!!</span>
      </div>
      <div class="o_discuss_content">
        <button t-on-click="resetCounter">Reset first counter</button>
        <button t-on-click="resetCounterAsync">Reset counter 2 in 3s</button>
        <button t-on-click="toggle">Toggle  Clock/counters</button>
        <button t-on-click="toggleColor">Toggle Color</button>
        <button t-on-click="updateState({})">Rerender this widget</button>
        <input t-ref="textinput"/>
        <t t-if="state.validcounter">
          <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
          <t t-widget="Counter" t-ref="counter2" t-props="{initialState:400}"/>
        </t>
        <t t-else="1">
          <t t-widget="Clock"/>
        </t>
        <t t-widget="ColorWidget" t-props="{color: state.color}"/>
        <button t-on-click="addNotif(false)">Add notif</button>
        <button t-on-click="addNotif(true)">Add sticky notif</button>
        <button t-on-click="addWarning">Add warning</button>
      </div>
    </div>
  </div>

</templates>
