<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   body {
  background: linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
  background-blend-mode: screen;
}

div:first-child {
  margin: 20px 0;
}
div:first-child table:first-of-type {
  margin: 15px 2px;
  background: #ffffff !important;
}
div:first-child table:last-of-type {
  margin: 15px 2px;
  background: #fdfdef !important;
}
div:first-child .head {
  text-align: center;
  margin: 45px 35px;
}
div:first-child .img-container {
  text-align: center;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <h4 class="head">
    Application
   </h4>
   <div class="container">
    <table class="table-responsive bordered highlight centered hoverable z-depth-2" v-show="persons.length">
     <thead>
      <tr>
       <th v-for="column in columns">
        {{column}}
       </th>
      </tr>
     </thead>
     <tbody>
      <tr v-for="(person,index) in persons">
       <td>
        {{index}}
       </td>
       <td>
        {{person.lname}}
       </td>
       <td>
        {{person.fname}}
       </td>
       <td>
        {{person.age}} years
       </td>
       <td>
        {{person.job}}
       </td>
       <td>
        {{person.address}}
       </td>
       <td style="width: 18%;">
        <a @click="edit(index)" class="btn waves-effect waves-light yellow darken-2" href="#modal">
         <i class="material-icons">
          edit
         </i>
        </a>
        <a @click="archive(index)" class="btn waves-effect waves-light red darken-2" href="#!">
         <i class="material-icons">
          archive
         </i>
        </a>
       </td>
      </tr>
      <tr>
       <td colspan="2">
        <div class="input-field">
         <input id="lname" placeholder="Placeholder" ref="lname" type="text" v-model="input.lname"/>
         <label for="lname">
          Last Name
         </label>
        </div>
       </td>
       <td>
        <div class="input-field">
         <input id="fname" placeholder="Placeholder" type="text" v-model="input.fname"/>
         <label for="fname">
          First Name
         </label>
        </div>
       </td>
       <td>
        <div class="input-field">
         <input id="age" placeholder="Placeholder" type="text" v-model="input.age"/>
         <label for="age">
          Age
         </label>
        </div>
       </td>
       <td>
        <div class="input-field">
         <input id="job" placeholder="Placeholder" type="text" v-model="input.job"/>
         <label for="job">
          Job
         </label>
        </div>
       </td>
       <td>
        <div class="input-field">
         <input id="address" placeholder="Placeholder" type="text" v-model="input.address"/>
         <label for="address">
          Address
         </label>
        </div>
       </td>
       <td>
        <a @click="add" class="btn btn-waves green darken-2" href="#!">
         <i class="material-icons">
          add
         </i>
        </a>
       </td>
      </tr>
     </tbody>
    </table>
    <table class="table-responsive centered bordered striped highlight z-depth-1 hoverable" v-show="bin.length">
     <thead>
      <tr>
       <th v-for="column in columns">
        {{column}}
       </th>
      </tr>
     </thead>
     <tbody>
      <tr v-for="(person,index) in bin">
       <td>
        {{index}}
       </td>
       <td>
        {{person.lname}}
       </td>
       <td>
        {{person.fname}}
       </td>
       <td>
        {{person.age}} years
       </td>
       <td>
        {{person.job}}
       </td>
       <td>
        {{person.address}}
       </td>
       <td>
        <a @click="restore(index)" class="btn waves-effect waves-light blue darken-2" href="#!">
         <i class="material-icons">
          restore
         </i>
        </a>
        <a @click="deplete(index)" class="btn waves-effect waves-light red darken-2" href="#!">
         <i class="material-icons">
          delete
         </i>
        </a>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <div class="modal modal-fixed-footer" id="modal">
    <div class="modal-content">
     <h4 class="center-align">
      Edit
     </h4>
     <p class="center-align">
      Edition form. Update informations
     </p>
     <div class="row">
      <form class="col s12">
       <div class="row">
        <div class="input-field col s6">
         <input id="last_name" placeholder="John" type="text" v-model="editInput.lname"/>
         <label for="last_name">
          Last Name
         </label>
        </div>
        <div class="input-field col s6">
         <input id="first_name" placeholder="Doe" type="text" v-model="editInput.fname"/>
         <label for="first_name">
          First Name
         </label>
        </div>
       </div>
       <div class="row">
        <div class="input-field col s6">
         <input id="edit_age" placeholder="26" type="text" v-model="editInput.age"/>
         <label for="edit_age">
          Age
         </label>
        </div>
        <div class="input-field col s6">
         <input id="edit_job" placeholder="Teacher" type="text" v-model="editInput.job"/>
         <label for="edit_job">
          Job
         </label>
        </div>
       </div>
       <div class="row">
        <div class="input-field col s12">
         <input id="edit_address" placeholder="Address" type="text" v-model="editInput.address"/>
         <label for="edit_address">
          First Name
         </label>
        </div>
       </div>
      </form>
     </div>
    </div>
    <div class="modal-footer">
     <a class="modal-action modal-close waves-effect waves-green btn-flat" href="#!">
      Close
     </a>
     <a @click="update" class="btn waves-effect waves-light" href="#!">
      <i class="material-icons">
       edit
      </i>
     </a>
    </div>
   </div>
  </div>
 </body>
</html>
