<template>
  <div class="container">
    <div class="columns">
      <div class="column is-2">
        <b-field>
          <b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
        </b-field>
      </div>
      <div class="column is-2">
        <b-field>
          <b-input placeholder="Nombre" icon="account" rounded></b-input>
        </b-field>
      </div>
      <div class="column is-2">
        <b-field>
          <b-select placeholder="Status" icon="information" rounded>
            <optgroup label="Status">
              <option value="Pre-registro">Pre-registro</option>
              <option value="Pre-validado">Pre-validado</option>
              <option value="Registro">Registro</option>
              <option value="Pre-término">Pre-término</option>
              <option value="Término">Término</option>
              <option value="Liberado">Liberado</option>
              <option value="Rechazado">Rechazado</option>
            </optgroup>
          </b-select>
        </b-field>
      </div>
    </div>

    <div class="columns">
      <section class="column is-12 is-hoverable has-text-centered">
        <b-table :data="students" :columns="columns"></b-table>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      students: [

      ],
      searchStudent: {}
    }
  },
  created () {
    this.$http.get('http://jsonplaceholder..typicode.com/users')
      .then(res => this.students = res.body)
  }
}
</script>

<style></style>
