<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   .logo {
  width: 50px;
  float: left;
  margin-right: 15px;
}

.form-group {
  max-width: 500px;
}

.actions {
  padding: 10px 0;
}

.glyphicon-euro {
  font-size: 12px;
}
  </style>
 </head>
 <body translate="no">
  <html lang="en">
   <head>
   </head>
   <body>
    <div class="container">
     <header class="page-header">
      <div class="branding">
       <img alt="Logo" class="logo" src="https://vuejs.org/images/logo.png" title="Home page"/>
       <h1>
        Vue.js CRUD application
       </h1>
      </div>
     </header>
     <div class="alert alert-warning">
      <strong>
       Outdated!
      </strong>
      Vue 2 implementation can be found
      <a href="https://codepen.io/mevdschee/pen/BpbEbj">
       here
      </a>
      .
     </div>
     <main id="app">
      <router-view>
      </router-view>
     </main>
    </div>
    <div class="actions">
     <a class="btn btn-default" v-link="{path: '/add-product'}">
      <span class="glyphicon glyphicon-plus">
      </span>
      Add product
     </a>
    </div>
    <div class="filters row">
     <div class="form-group col-sm-3">
      <label for="search-element">
       Product name
      </label>
      <input class="form-control" id="search-element" requred="" v-model="searchKey"/>
     </div>
    </div>
    <table class="table">
     <thead>
      <tr>
       <th>
        Name
       </th>
       <th>
        Description
       </th>
       <th>
        Price
       </th>
       <th class="col-sm-2">
        Actions
       </th>
      </tr>
     </thead>
     <tbody>
      <tr v-for="product in products | filterBy searchKey in 'name'">
       <td>
        <a v-link="{name: 'product', params: {product_id: product.id}}">
         {{ product.name }}
        </a>
       </td>
       <td>
        {{ product.description }}
       </td>
       <td>
        {{ product.price }}
        <span aria-hidden="true" class="glyphicon glyphicon-euro">
        </span>
       </td>
       <td>
        <a class="btn btn-warning btn-xs" v-link="{name: 'product-edit', params: {product_id: product.id}}">
         Edit
        </a>
        <a class="btn btn-danger btn-xs" v-link="{name: 'product-delete', params: {product_id: product.id}}">
         Delete
        </a>
       </td>
      </tr>
     </tbody>
    </table>
    <h2>
     Add new product
    </h2>
    <form v-on:submit="createProduct">
     <div class="form-group">
      <label for="add-name">
       Name
      </label>
      <input class="form-control" id="add-name" required="" v-model="product.name"/>
     </div>
     <div class="form-group">
      <label for="add-description">
       Description
      </label>
      <textarea class="form-control" id="add-description" rows="10" v-model="product.description"></textarea>
     </div>
     <div class="form-group">
      <label for="add-price">
       Price,
       <span class="glyphicon glyphicon-euro">
       </span>
      </label>
      <input class="form-control" id="add-price" type="number" v-model="product.price"/>
     </div>
     <button class="btn btn-primary" type="submit">
      Create
     </button>
     <a class="btn btn-default" v-link="'/'">
      Cancel
     </a>
    </form>
    <h2>
     {{ product.name }}
    </h2>
    <b>
     Description:
    </b>
    <div>
     {{ product.description }}
    </div>
    <b>
     Price:
    </b>
    <div>
     {{ product.price }}
     <span class="glyphicon glyphicon-euro">
     </span>
    </div>
    <br/>
    <span aria-hidden="true" class="glyphicon glyphicon-arrow-left">
    </span>
    <a v-link="'/'">
     Backt to product list
    </a>
    <h2>
     Edit product
    </h2>
    <form v-on:submit="updateProduct">
     <div class="form-group">
      <label for="edit-name">
       Name
      </label>
      <input class="form-control" id="edit-name" required="" v-model="product.name"/>
     </div>
     <div class="form-group">
      <label for="edit-description">
       Description
      </label>
      <textarea class="form-control" id="edit-description" rows="3" v-model="product.description"></textarea>
     </div>
     <div class="form-group">
      <label for="edit-price">
       Price,
       <span class="glyphicon glyphicon-euro">
       </span>
      </label>
      <input class="form-control" id="edit-price" type="number" v-model="product.price"/>
     </div>
     <button class="btn btn-primary" type="submit">
      Save
     </button>
     <a class="btn btn-default" v-link="'/'">
      Cancel
     </a>
    </form>
    <h2>
     Delete product {{ product.name }}
    </h2>
    <form v-on:submit="deleteProduct">
     <p>
      The action cannot be undone.
     </p>
     <button class="btn btn-danger" type="submit">
      Delete
     </button>
     <a class="btn btn-default" v-link="'/'">
      Cancel
     </a>
    </form>
   </body>
  </html>
 </body>
</html>
