{% extends 'base_fullwidth_leaflet.html' %}
{% load render_table from django_tables2 %}
{% block content %}
    <h1><i class="{{ icon | safe }}"></i> {{ title | safe }}</h1>
    <p>
        <small>Observation créée par <b>{{ object.created_by }}</b> le <b>{{ object.timestamp_create }}</b>
            et mise à jour le <b>{{ object.timestamp_update }}</b></small>
    </p>
    <div class="row">
        <div class="large-6 medium-12 columns">
            <div class="accordion" data-accordion>
                <li class="accordion-item is-active" data-accordion-item>
                    <a class="accordion-title">Informations principales</a>
                    <div class="accordion-content" data-tab-content>
                        <div class="row">
                            <div class="large-12 columns">
                                <label>Date de contrôle</label>
                                <div class="small callout">{{ object.visit_date }}</div>
                            </div>
                        </div>
                        <div class="callout secondary">
                            <div class="callout">
                            <h3>Contexte</h3>
                                <div class="row">
                                    <div class="large-6 small-12 columns">
                                        <label>Contexte</label>
                                        <div class="small callout">{{ object.context }}</div>
                                    </div>
                                    <div class="large-6 small-12 columns">
                                        <label>Peuplement forestier</label>
                                        <div class="small callout">{{ object.forest_stands }}</div>
                                    </div>
                                    <div class="large-6 small-12 columns">
                                        <label>Circomstance de la découverte</label>
                                        <div class="small callout">{{ object.circumstance }}</div>
                                    </div>
                                    <div class="large-6 small-12 columns">
                                        <label>Situation dans le milieu (dans le bois, en lisière, etc.) </label>
                                        <div class="small callout">{{ object.situation }}</div>
                                    </div>
                                </div>
                            </div>
                             <div class="callout">
                                <h3>Caractéristiques de l'arbre</h3>
                                <div class="row">
                                    <div class="large-4 medium-12 columns">
                                        <label>Espèce d'arbre</label>
                                        <div class="small callout">{{ object.tree_specie }}</div>
                                    </div>
                                    <div class="large-4 medium-6 columns">
                                        <label>Etat de l'arbre</label>
                                        <div class="small callout">{{ object.health }}</div>
                                    </div>
                                    <div class="large-4 medium-6 columns">
                                        <label>Diamètre de l'arbre à 1.30m du sol (en cm)</label>
                                        <div class="small callout">{{ object.tree_diameter }}</div>
                                    </div>
                                    <div class="large-6 columns">
                                        <label>Arbre debout</label>
                                        <div class="small callout">{{ object.standing }}</div>
                                    </div>
                                    <div class="large-6 columns">
                                        <label>Arbre protégé</label>
                                        <div class="small callout">{{ object.protected }}</div>
                                    </div>
                                </div>
                            </div>
                             <div class="callout">
                                <h3>Occupation</h3>
                                <div class="row">
                                    <div class="medium-12 columns">
                                        <label>Espèces</label>
                                        <div class="small callout">
                                            {% if object.bat_specie %}
                                                <ul>
                                                {% for sp in object.bat_specie.all|dictsort:"sys_order" %}
                                                    <li> {{ sp.codesp }}{% if d.sp_true %}*{% endif %}</b> (
                                                        {{ sp.common_name_fr }})
                                                    </li>
                                                {% endfor %}
                                            {% else %}
                                                Aucune espèce
                                            {% endif %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="callout">
                                <h3>Caractérisation des gîtes</h3>
                                <div class="row">
                                    <div class="large-4 medium-12 columns">
                                        <label>Types de gîte(s)</label>
                                        <div class="small callout">
                                            {% if object.gite_type %}
                                                <ul>
                                                {% for gt in object.gite_type.all %}
                                                    <li> {{ gt.descr }}</li>
                                                {% endfor %}
                                            {% else %}
                                                Aucune type indiqué
                                            {% endif %}
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="large-4 medium-6 columns">
                                        <label>Origines du/des gîte(s)</label>
                                        <div class="small callout">
                                            {% if object.gite_origin %}
                                                <ul>
                                                {% for go in object.gite_origin.all %}
                                                    <li> {{ go.descr }}</li>
                                                {% endfor %}
                                            {% else %}
                                                Aucune origine indiquée
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="large-4 medium-6 columns">
                                        <label>Emplacement du/des gîte(s)</label>
                                        <div class="small callout">
                                            {% if object.gite_localisation %}
                                                <ul>
                                                {% for gl in object.gite_localisation.all %}
                                                    <li> {{ gl.descr }}</li>
                                                {% endfor %}
                                                </ul>
                                            {% else %}
                                                Aucune localisation indiquée
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a class="accordion-title">Localité</a>
                    <div class="accordion-content" data-tab-content>
                        <div class="row">
                            <div class="large-12 columns">
                                <div class="medium-6 small-12 columns">
                                    <label>Nom</label>
                                    <div class="small callout">
                                        <a href="{% url 'sights:place_detail' pk=object.place.id_place %}">{{ object.place.id_place }}
                                            / {{ object.place }}</a></div>
                                </div>
                                <div class="medium-6 small-12 columns">
                                    <label>Situation</label>
                                    <div class="small callout">{{ object.place.municipality.name }}
                                        ({{ object.place.territory.code }})
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                {% if object.comment %}
                    <li class="accordion-item" data-accordion-item>
                        <a class="accordion-title">Commentaire</a>
                        <div class="accordion-content" data-tab-content>
                            <div class="row">
                                <div class="large-12 columns">
                                    {{ object.comment|safe }}
                                </div>
                            </div>
                        </div>
                    </li>
                {% endif %}
            </div>
            <br/>
            <div class="button-group radius">
                <a title="Retour à la session" class="button"
                   href="{% url 'sights:place_detail' pk=object.place.id_place %}"><i class="fi-arrow-left"></i>
                    Retour</a>
                <a title="Modifier cette observation" class="button warning"
                   href="{% url 'sights:tree_update' pk=object.id_tree %}"><i class="fa fa-fw fa-pencil-square-o"></i>
                    Modifier</a>
                <a title="Supprimer cette localité" class="button alert"
                   href="{% url 'sights:tree_delete' pk=object.id_tree %}"><i class="fa fa-fw fa-trash"></i>
                    Supprimer</a>
            </div>
        </div>

        <div class="large-6 medium-12 columns">
            <h3>
                <si class="{{ treegiteicon | safe }}"></i> {{ treegitetitle | safe }}
            </h3>
            {% if treegitecount > 0 %}
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-info"></i></span>
                    {% ifequal 1 treegitecount %}
                        <input class="input-group-field" type="text"
                               value="{{ treegitecount }} donnée détaillée"
                               readonly>
                    {% else %}
                        <input class="input-group-field" type="text"
                               value="{{ treegitecount }} données détaillées"
                               readonly>
                    {% endifequal %}
                    <div class="input-group-button">
                        <a href="{% url 'sights:treegite_create' pk=object.pk %}" class="button"
                           title="Créer un nouveau relevé détaillé"><i class="fi-plus"></i></a>
                    </div>
                </div>
                {% if treegitecount > 0 %}

                    {% render_table treegitetable %}

                {% endif %}
            {% else %}
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-info"></i></span>
                    <input class="input-group-field" type="text" value="Aucune observation" readonly>
                    <div class="input-group-button">
                        <a href="{% url 'sights:treegite_create' pk=object.pk %}" class="button"
                           title="Créer un nouveau relevé détaillé"><i class="fi-plus"></i></a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    <br/> {% endblock %}