{% extends 'base_fullwidth_leaflet.html' %}
{% load render_table from django_tables2 %}
{% load i18n %}
{% load static %}
{% block content %}
    <h1><i class="{{ icon | safe }}"></i> {{ title | safe }}</h1>
    <p>
        <small>Session créée par <b>{{ object.created_by }}</b> le <b>{{ object.timestamp_create }}</b>
            {% if object.updated_by %}et
                mise à jour le <b>{{ object.timestamp_update }}</b> par <b>{{ object.updated_by }}</b>
                </small>{% endif %}
    </p>
    <div class="row">
        <div class="col-md-12 col-lg-5">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="pull-right btn-group">
                        <a href="{% url 'sights:session_update' pk=object.pk %}" class="btn btn-default btn-xs"><i
                                class="fa fa-pencil fa-fw"></i><span class="hidden-xs"> Modifier</span></a>
                        <a href="{% url 'sights:session_delete' pk=object.pk %}" class="btn btn-danger btn-xs"><i
                                class="fa fa-trash fa-fw"></i><span class="hidden-xs"> Supprimer</span></a>
                        <a href="{% url 'sights:place_detail' pk=object.place_id %}" class="btn btn-info btn-xs"><i
                                class="fa fa-chevron-left fa-fw"></i><span class="hidden-xs"> Localité</span></a>
                    </div>
                    <h4 class="panel-title"><i class="fa fa-info-circle fa-fw"></i> Informations sur la session</h4>
                </div>
                <div role="tabpanel">
                    <ul id="myTab" class="nav nav-tabs">
                        <li role="navigation" class="active"><a class="tab" href="#mainInfo"
                                                                aria-controls="maininfo"
                                                                role="tab" data-toggle="tab">Informations
                            principales</a>
                        </li>
                        <li role="navigation"><a href="#otherInfo" aria-controls="otherinfo" role="tab"
                                                 data-toggle="tab">Autres
                            infos</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        {#                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"#}
                        {#                     aria-labelledby="headingOne">#}
                        <div role="tabpanel" class="tab-pane active" id="mainInfo">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <fieldset>
                                            <legend>Caractéristiques principales</legend>
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <label>Localité</label>
                                                    <div class="well well-sm">{{ object.place }}
                                                        <a href="{% url 'sights:sessionchangeplace_update' pk=object.pk %}"
                                                           class="btn btn-xs btn-warning pull-right"><i
                                                                class="fa fa-fw fa-pencil-square"></i><span class="hidden-xs">  Changer</span></a>
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-6">
                                                    <label>Nom de la session</label>
                                                    <div class="well well-sm">{{ object.name }}</div>
                                                </div>
                                                <div class="col-xs-12 col-sm-6">
                                                    <label>Type de contact</label>
                                                    <div class="well well-sm">{{ object.contact }}</div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6">
                                                    <label>Observateur principal</label>
                                                    <div class="well well-sm">
                                                        <b>{{ object.main_observer.get_full_name }}</b>
                                                        ({{ object.main_observer.username }})
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6">
                                                    <label>Autres observateurs <span
                                                            class="badge">{{ object.other_observer.all.count }}</span></label>
                                                    <div class="well well-sm">
                                                        {% if object.other_observer.all.count > 0 %}
                                                            {% for o in object.other_observer.all %}
                                                                <b>{{ o.get_full_name }}</b> ({{ o.username }})
                                                                <br/>
                                                            {% endfor %}
                                                        {% else %}
                                                            Aucun
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6">
                                                    <label>Début</label>
                                                    <div class="well well-sm">
                                                        {{ object.date_start }}
                                                        {% if object.time_start %}{{ object.time_start }}{% endif %}
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6">
                                                    <label>Fin</label>
                                                    <div class="well well-sm">
                                                        {% if object.date_end or object.time_end %}
                                                            {% if object.date_end %}{{ object.date_end }}{% endif %}
                                                            {% if object.time_end %}{{ object.time_end }}{% endif %}
                                                        {% else %}
                                                            -
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                        <label>Étude</label>
                                                        <div class="well well-sm">
                                                            {% if object.study %}{{ object.study }}{% else %} Session non-attribuée à une étude {% endif %}
                                                        </div>
                                                </div>   
                                                {% if object.is_confidential %}
                                                    <div class="col-lg-12">
                                                        <div class="alert alert-danger" role="alert">
                                                            <i class="fa fa-exclamation-triangle"
                                                               aria-hidden="true"></i> {% trans "les données de cette session sont confidentielles" %}
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="otherInfo">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-lg-12">
                                        {% if object.data_file or object.bdsource or object.comment %}
                                            {% if object.data_file %}
                                                <fieldset>
                                                    <legend>Fichiers</legend>
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <label>Fichiers relatifs à la session</label>
                                                            <div class="well well-sm"><a href="{% get_media_prefix %}/{{ object.data_file }}" target='_blank'> {{ object.data_filename }}</a></div>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            {% endif %}
                                            {% if object.bdsource %}
                                                <fieldset>
                                                    <legend>BD Source</legend>
                                                    <div class="row">
                                                        <div class="col-md-6 col-xs-12">
                                                            <label>Source de la localité</label>
                                                            <div class="well well-sm">{{ object.bdsource }}</div>
                                                        </div>
                                                        <div class="col-md-6 col-xs-12">
                                                            <label>Identifiant de la localité dans la base de donnée
                                                                source</label>
                                                            <div class="well well-sm">{{ object.id_bdsource }}</div>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            {% endif %}
                                            {% if object.comment %}
                                                </fieldset>
                                                <legend>Commentaire</legend>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="well well-sm">{{ object.comment|safe }}</div>
                                                    </div>
                                                </div>
                                                <fieldset>
                                            {% endif %}
                                        {% else %}
                                            {% trans "Aucune" %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        {% comment %}


            DONNEES ATTRIBUEES A LA SESSION


        {% endcomment %}
        <div class="col-md-12 col-lg-7">
            {% comment %}

            BLOC1: Espèces observées

            {% endcomment %}
            <div id="accordion" class="panel-group">
                {% comment %}

                    BLOC1: Sessions d'inventaires

                {% endcomment %}
                <div class="panel panel-default panel-info panel-table">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        <div class="pull-right btn-group btn-group-xs">
                            {% if sightingcount > 0 %}
                                <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseSighting" title="voir/cacher la liste"><span
                                        class="caret"></span></a>
                            {% endif %}
                            <a href="{% url 'sights:sighting_create' pk=object.pk %}"
                               class="pull-right btn btn-primary btn-xs"><i
                                    class="fi-plus"></i><span class="hidden-xs"> Ajouter</span></a>
                        </div>
                        <h4><i
                                class="{{ sightingicon  | safe }}"></i> {{ sightingtitle | safe }}</a>
                            {% if sightingcount > 0 %}
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseSighting" title="voir/cacher la liste"><span
                                        class="badge">{{ sightingcount }}</span></a>
                            {% else %}
                                <span class="badge">{{ sightingcount }}</span>
                            {% endif %}
                        </h4>
                    </div>

                    <!-- Table -->
                    {% if sightingcount > 0 %}
                        <div id="collapseSighting" class="panel-body">
                            {% render_table sightingtable %}
                        </div>
                    {% endif %}
                </div>
                {% comment %}

                    BLOC2: Dispositifs d'échantillonages

                {% endcomment %}
                <div class="panel panel-default panel-info panel-table">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        <div class="pull-right btn-group btn-group-xs">
                            {% if devicecount > 0 %}
                                <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseDevice" title="voir/cacher la liste"><span
                                        class="caret"></span></a>
                            {% endif %}
                            <a href="{% url 'sights:device_create' pk=object.pk %}"
                               class="pull-right btn btn-primary btn-xs"><i
                                    class="fi-plus"></i><span class="hidden-xs"> Ajouter</span></a>
                        </div>
                        <h4><i
                                class="{{ deviceicon  | safe }}"></i> {{ devicetitle | safe }}</a>
                            {% if devicecount > 0 %}
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseDevice" title="voir/cacher la liste"><span
                                        class="badge">{{ devicecount }}</span></a>
                            {% else %}
                                <span class="badge">{{ devicecount }}</span>
                            {% endif %}

                        </h4>
                    </div>
                    <!-- Table -->
                    {% if devicecount > 0 %}
                        <div id="collapseDevice" class="panel-body">
                            {% render_table devicetable %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}