<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../paper-button/paper-button.html">

<polymer-element name="my-element">

  <template>
    <style>
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
        background-color: rgb(233, 233, 233);
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 150, 136);
      }
      colorprimary {
        color: rgb(0, 150, 136);
      }
      coloraccent {
        color: rgb(255, 82, 82);
      }
      #section2 {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-left: 20px;
        padding-right: 40px;
        padding-bottom: 40px;
      }
      #core_menu {
        font-family: 'Roboto Slab', serif;
        font-weight: 400;
        font-size: 18px;
      }
      #logo_title {
        font-family: 'Roboto Slab', serif;
        font-weight: 700;
        font-size: 28px;
      }
      #core-item {
        padding: 5px;
      }
      #pedidos_button, #precios_button, #clientes_button {
        text-transform: none;
        margin-bottom: 10px;
        width: 100%;
        height: 100%;
      }
      #pedidos_button {
        background-color: rgb(255, 255, 255);
      }
      #precios_button {
        background-color: rgb(255, 255, 255);
      }
      #clientes_button {
        background-color: rgb(255, 255, 255);
      }
      #group_recibidos, #group_procesados, #group_despachados {
        width: 30%;
        height: 100%;
      }
      #sub_header {
        color: rgb(0, 121, 107);
        font-family: 'Roboto Slab', serif;
        font-weight: 400;
        font-size: 18px;
        padding: 15px;
      }
      #div {
        width: 100%;
        height: 100%;
      }
      .shadow_list {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .pedidos_list {
        width: 100%;
        height: 100%;
        background-color: rgb(250, 250, 250);
      }
    </style>
    <core-header-panel mode="standard" shadow id="core_header_panel" vertical layout>
      <core-toolbar id="core_toolbar" class="tall" horizontal layout center center-justified>
        <core-icon-button icon="menu" id="core_icon_button" class="bottom" onclick="openDrawer()" on-tap="openDrawer()"></core-icon-button>
        <div id="logo_title">
          <header id="header_txt">
            <span id="span">Fast Food </span>
            <coloraccent id="coloraccent">&</coloraccent>
            <span id="span1"> Delivery</span>
          </header>
        </div>
      </core-toolbar>
      <section id="section">
        <core-drawer-panel transition selected="main" id="core_drawer_panel" touch-action>
          <section id="section1" drawer>
            <core-menu selected="0" selectedindex="0" id="core_menu" fit>
              <core-item id="core_item" horizontal center layout active>
                <paper-button raised id="pedidos_button">Pedidos</paper-button>
              </core-item>
              <core-item id="core_item1" horizontal center layout>
                <paper-button raised id="precios_button">Precios</paper-button>
              </core-item>
              <core-item id="core_item2" horizontal center layout>
                <paper-button raised id="clientes_button">Clientes</paper-button>
              </core-item>
            </core-menu>
          </section>
          <section id="section2" main horizontal justified layout>
            <div id="group_recibidos" vertical layout center>
              <sub_header id="sub_header">Pedidos Recibidos</sub_header>
              <paper-shadow z="2" id="paper_shadow2" class="shadow_list" vertical layout>
                <core-list id="recibidos" class="pedidos_list" vertical layout></core-list>
              </paper-shadow>
            </div>
            <div id="group_procesados" vertical layout center>
              <sub_header id="sub_header">Pedidos Procesados</sub_header>
              <paper-shadow z="2" id="paper_shadow" class="shadow_list" vertical layout>
                <core-list id="procesados" class="pedidos_list" vertical layout></core-list>
              </paper-shadow>
            </div>
            <div id="group_despachados" vertical layout center>
              <sub_header id="sub_header">Pedidos Despachados</sub_header>
              <paper-shadow z="2" id="paper_shadow1" class="shadow_list" vertical layout>
                <core-list id="despachados" class="pedidos_list" vertical layout></core-list>
              </paper-shadow>
            </div>
          </section>
        </core-drawer-panel>
      </section>
    </core-header-panel>
  </template>

  <script>

    Polymer({
      over: 'seamed'
    });

  </script>

</polymer-element>