Vue.component('categorias-container', {
  template: `
    <div class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div class="card" style="height:100%">
            <div class="card-content">
              <div class="media">
                <div class="media-content" style="overflow:hidden">
                  <p class="title is-6" v-text="catego"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>`,
  data() {
    return {
      categorias: null
    }
  },
  mounted() {
    axios.get("/api/categorias").then(response => {
      this.categorias = response.data;
    });
  }
});

Vue.component('productos-container', {
  template: `
    <div class="productos-container">
      <div v-for="producto in productos" class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
          </figure>
        </div>
        <div class="card-content">
          <div class="media">
            </div>
            <div class="media-content">
              <p class="title is-4">John Smith</p>
              <p class="subtitle is-6">@johnsmith</p>
            </div>
          </div>

          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Phasellus nec iaculis mauris. <a>@bulmaio</a>.
            <a href="#">#css</a> <a href="#">#responsive</a>
            <br>
            <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
          </div>
        </div>
      </div>
    </div>`,
  data() {
    return {
      productos: null
    }
  },
  mounted() {
    axios.get("/api/productos").then(response => this.productos = response.data);
  }
});