window.Event = new Vue();

Vue.component('nav-bar', {
	template: `
		<nav class="navbar is-danger" role="navigation" aria-label="main navigation">
          <div class="navbar-brand">
            <a class="navbar-item" href="https://mps.org.uy">
              <img src="/assets/logoMPS.png" height="28">
            </a>
            <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
            <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
            </a>
          </div>

          <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
            <div class="navbar-start has-text-right-mobile">
                <!-- Styles nombre del barrio-->
                <p class="navbar-item"><slot name="gdc"></slot></p>
                <a class="navbar-item"
                	onclick="event.preventDefault();
                	document.getElementById('logout-form').submit();">
                    Cerrar sesión
                </a>
                <slot name="logout-form"></slot>
            </div>
          </div>
        </nav>`,
	data() {
		return {
			isActive: false
		}
	},
  	methods: {
  		toggleState() {
  			this.isActive = !this.isActive;
  		}
  	}
});

Vue.component('nav-migas', {
  data() {
    return {
      migas: []
    }
  },
  computed: {
    visible: function() {
      return this.migas.length > 0
    }
  },
  mounted() {
    Event.$on('migas-setear-como-inicio', (miga) =>  {
      this.migas = [];
      this.migas.push(miga);
    });
    Event.$on('migas-agregar', (miga) =>  {
      this.migas.push(miga);
    });
    Event.$on('migas-reset', () =>  {
      this.migas = [];
    });
    Event.$on('migas-pop', () =>  {
      this.migas.pop();
    });
  }
});

new Vue({
  el: '#app'
});