{% 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: 80px;
    }
</style>

    <div class="container">

        <br/>
        
        
        <div class="row">
            <div class="col s6 m4 l4">
                <p>Plantas en el área 1</p>
            </div>
            <form class="col s6 m8 l8">
            <div class="row" >
                <div class="input-field col s12">
                <i class="material-icons prefix">search</i>
                <input id="icon_telephone" type="tel" class="validate">
                <label for="icon_telephone">Buscar planta</label>
                </div>
            </div>
            </form>
        </div>
      
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Pasto español<i class="material-icons right">more_vert</i></span>
                    </div>
                </div>
            </div>
             <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Aglaonema<i class="material-icons right">more_vert</i></span>
                    </div>
                </div>
            </div>
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Alix<i class="material-icons right">more_vert</i></span>
                    </div>
                </div>
            </div>
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Palma camedor<i class="material-icons right">more_vert</i></span>
                    </div>
                </div>
            </div>
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content">
                      <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Marginata<i class="material-icons right">more_vert</i></span>
                    </div>
                </div>
            </div>
            <div class="col s12 m12 l12">
                <a href="/area1/telefono/datos/">
                    <div class="card">
                        <div class="card-content">
                        <span class="card-title activator grey-text text-darken-4"><i class="material-icons">filter_vintage</i> Teléfono<i class="material-icons right">more_vert</i></span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>



{% endblock content%}


{% block js %}

<script type="text/javascript">

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


</script>

{% endblock js %}