@extends("app")


@section("content")

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <h1 class="h1">Usuarios</h1>
    </div>
    <div class="col-xs-12 col-sm-6 text-right">
      <a href="" class="btn btn-primary btn-header">
        Nuevo usuario <i class="fa fa-user-plus" aria-hidden="true"></i>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-3">
      <div class="form-group">
        <label for="filter-area">Filtrar por Área</label>    
        <select class="form-control" id="filter-area" name="area">
          <option>Ejemplo</option>
          <option>Cobranza</option>
          <option>Ejemplo</option>
          <option>Cobranza</option>
          <option>Ejemplo</option>
          <option>Cobranza</option>
        </select>
      </div>
    </div>  
    <div class="col-xs-12 col-sm-3">
      <div class="form-group">
        <label for="filter-name">Filtrar por Nombre</label>    
        <input class="form-control" type="text" id="filter-name" name="name">
      </div>
    </div>
    <div class="col-xs-12 col-sm-2">
      <button type="button" class="btn btn-primary btn-block btn-input">Filtrar</button>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Nombre Completo</th>
          <th>Correo</th> 
          <th>Cuenta Z</th>
          <th>Área</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jill Smith</td>
          <td>simth@gmail.com</td>
          <td>21431423</td>
          <td>Finanzas</td>
          <td class="text-center">
            <a href="" class="btn btn-default">
              <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>
            <a href="" class="btn btn-danger">
              <i class="fa fa-trash" aria-hidden="true"></i>
            </a>
          </td>
        </tr>
        <tr>
          <td>Eve Jackson</td>
          <td>jackson@gmail.com</td>
          <td>90123698</td>
          <td>Finanzas</td>
          <td class="text-center">
            <a href="" class="btn btn-default">
              <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>
            <a href="" class="btn btn-danger">
              <i class="fa fa-trash" aria-hidden="true"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

@endsection