{% 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: 350px;
    }
    .head{
        font-size:40px;
    }
</style>

    <div class="container">

        <br/>
        <p class="head">Administrar información</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/invernadero.jpg">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">analytics</i> Zonas<i class="material-icons right">more_vert</i></span>
                      <p>Administra y consulta información de las zonas de producción.</p>
                    </div>
                    <div class="card-reveal">
                        <center><span class="card-title grey-text text-darken-4">Zonas <i class="material-icons right">close</i></span></center>
                        <br/>
                        <a href="/zonas" class="waves-effect waves-light btn grey "><i class="material-icons left">eco</i>Revisar</a><br/><br/>
                       

                    </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/nodos.jpg" width="300px">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">format_list_bulleted</i> Nodos<i class="material-icons right">more_vert</i></span>
                      <p>Administra los nodos qu están dispersos en cada zona de trabajo.</p>
                    </div>
                    <div class="card-reveal">
                        <center><span class="card-title grey-text text-darken-4">Nodos<i class="material-icons right">close</i></span></center>
                        <br/>
                        <a href="/nodos" class="waves-effect waves-light btn grey"><i class="material-icons left">sync</i>Revisar</a><br/><br/>
                      
                    </div>
                </div>
            </div>
            <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/trabajadores.png" width="300px">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">people</i> Trabajadores<i class="material-icons right">more_vert</i></span>
                      <p>Administra trabajadores </p>
                    </div>
                    <div class="card-reveal">
                        <center><span class="card-title grey-text text-darken-4">Trabajadores<i class="material-icons right">close</i></span></center>
                        <br/>
                        <a class="waves-effect waves-light btn grey" href="/trabajadores" ><i class="material-icons left">tag_faces</i>Trabajadores</a>
                    </div>
                </div>
            </div>
            <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/laurenti.jpg" width="300px">
                    </div>
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">people</i> Plantas<i class="material-icons right">more_vert</i></span>
                      <p>Administra especies de plantas</p>
                    </div>
                    <div class="card-reveal">
                        <center><span class="card-title grey-text text-darken-4">Plantas<i class="material-icons right">close</i></span></center>
                        <br/>
                        <a class="waves-effect waves-light btn grey" href="/plantas" ><i class="material-icons left">tag_faces</i>Revisar</a>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

    </div>



{% endblock content%}


{% block js %}

<script type="text/javascript">

	$(document).ready(function(){
		$('.materialboxed').materialbox();
	});


</script>

{% endblock js %}