{% extends "base.html" %}
{% load static %}

{% block content %}
<style>
    @media screen and (max-width: 600px) {
    }
    .card{
        /*display:inline-block;*/
    }
    .card .card-image img{
        height: 200px;
    }
    .card{
        height: 280px;
    }
    .head{
        font-size:40px;
    }
</style>

    <div class="container">

        <br/>
        <p class="head" align="center">Panel de Configuración de Nodos</p>
        <br>
        <div class="row">
            <div class="col s12 m6 l4">
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                      <img class="activator" src="/media/images/wifi.jpg">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Area 1<i class="material-icons right">more_vert</i></span>
                    
                    </div>
                    <div class="card-reveal">
                        <center><span class="card-title grey-text text-darken-4">Opciones <i class="material-icons right">close</i></span></center>
                        <br/>
                        <a href="/area1/plantas" class="waves-effect waves-light btn grey "><i class="material-icons left">remove_red_eye</i>Ver</a><br/><br/>
                        <a href="/alimentacion" class="waves-effect waves-light btn grey"><i class="material-icons left">edit</i>Editar</a><br/><br/>
                        <a href="/vacunacion" class="waves-effect waves-light btn grey"><i class="material-icons left">delete</i>Borrar</a>

                    </div>
                </div>
            </div>
             {% if request.user.is_staff %}
            <div class="col s12 m6 l4">
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                      <img class="activator" src="/media/images/wifi.jpg" width="300px">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Area 2<i class="material-icons right">more_vert</i></span>
                     
                    </div>
                    <div class="card-reveal">
                        <center><span class="card-title grey-text text-darken-4">Organización<i class="material-icons right">close</i></span></center>
                        <br/>
                        <a href="/organizacion/corrales" class="waves-effect waves-light btn grey "><i class="material-icons left">dashboard</i>Corrales</a><br/><br/>
                        <a href="/organizacion/lotes" class="waves-effect waves-light btn grey"><i class="material-icons left">dashboard</i>Lotes</a><br/><br/>
                        <a href="/organizacion/terrenos" class="waves-effect waves-light btn grey"><i class="material-icons left">dashboard</i>Terrenos de pastoreo</a>
                    </div>
                </div>
            </div>
          
            {% endif %}
        </div>
          <div class="fixed-action-btn">
          <a class="btn-floating btn-large add_zone" style="background-color:#0066ff">
            <i class="large material-icons">add</i>
          </a>
        </div>
    </div>
{% include "cuentas/modal_nuevo_trabajador.html" %}



<div id="modalOption" class="modal bottom-sheet">
    <div class="modal-content">
        <center><h4 class="modal_opc_vacuna">Registrar trabajador</h4></center>
        <br/>
        <center>
            <a class="waves-effect waves-light btn-large blue reg_permanente" ><i class="material-icons left">person</i>Permanente</a>
            <a class="waves-effect waves-light btn-large blue reg_temporal"><i class="material-icons left">person_outline</i>Temporal</a>
        </center>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancelar</a>
    </div>
</div>

{% endblock content%}


{% block js %}

<script type="text/javascript">
        // Definir modales
     $('#modalOption').modal({
        dismissible: true,
    });
     $('#modal_nuevo_trabajador').modal({
        dismissible: true,
    });


    $(document).ready(function(){
        $('.materialboxed').materialbox();
    });
    // $(document).on("click",".add_zone",function(){
    //     $('#modalOption').modal('open');
   // });
       $(document).on("click",".add_zone",function(){
        $("#id_tipo").val("true")
        $(".modaltitle_new_trabajador").text("Agregar trabajador permanente");
        $("#modalOption").modal("close");
        $('#modal_nuevo_trabajador').modal('open');
    });

</script>

{% endblock js %}