{% extends 'base_fullwidth_leaflet.html' %}
{% load render_table from django_tables2 %}
{% load i18n %}
{% 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>
            {% 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:sighting_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:sighting_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:session_detail' pk=object.session.pk %}" class="btn btn-info btn-xs"><i
                                class="fa fa-chevron-left fa-fw"></i><span class="hidden-xs"> Session</span></a>
                    </div>
                    <h4 class="panel-title"><i class="fa fa-info-circle fa-fw"></i> Informations sur l'observation</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>Données principales</legend>
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <label>Espèce</label>
                                                    <div class="well well-sm">
                                                        {% trans "Nom commun" %} :
                                                        <strong>{{ object.codesp.common_name_fr }}</strong> <span
                                                            class="label label-success">{% trans "Espèce vraie" %}</span><br/>
                                                        {% trans "Nom scientifique" %} :
                                                        <i>{{ object.codesp.sci_name }}</i><br/>
                                                        {{ object.codesp.full_name }}
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-6">
                                                    <label>Nombre</label>
                                                    <div class="well well-sm">
                                                        <strong>{{ object.total_count }}</strong>
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-6">
                                                    <label>Donnée douteuse</label>
                                                    <div class="well well-sm">
                                                        {% if object.is_doubtful %}
                                                            <span class="label label-warning"><i
                                                                    class="fa fa-exclamation-triangle fa-fw"></i></span>
                                                            <b>Oui</b>
                                                        {% else %}
                                                            <span class="label label-success"><i
                                                                    class="fa fa-check fa-fw"></i></span>
                                                            <b>Non</b>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-6">
                                                    <label>Colonie de reproduction</label>
                                                    <div class="well well-sm">
                                                        {% if object.breed_colo %}
                                                            <b><span class="label label-success"><i
                                                                    class="fa fa-check fa-fw"></i></span>
                                                                Oui</b>{% else %}Non{% endif %}
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-6">
                                                    <label>Période</label>
                                                    <div class="well well-sm">
                                                        {{ object.period }}
                                                    </div>
                                                </div>
                                                {% if object.session.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 "Cette donnée est confidentielle" %}
                                                        </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">{{ object.data_file }}</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 countdetailcount > 0 %}
                                <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseCountdetail" title="voir/cacher la liste"><span
                                        class="caret"></span></a>
                            {% endif %}
                            <button data-toggle="modal" data-target="#FsCountDetail"
                                    class="pull-right btn btn-default btn-xs"><i
                                    class="fa fa-arrows-alt fa-fw"></i><span class="hidden-xs"> Plein écran</span>
                            </button>
                            <a href="{% url 'sights:countdetail_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="{{ countdetailicon  | safe }}"></i> {{ countdetailtitle | safe }}</a>
                            {% if sightingcount > 0 %}
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseCountdetail" title="voir/cacher la liste"><span
                                        class="badge">{{ countdetailcount }}</span></a>
                            {% else %}
                                <span class="badge">{{ countdetailcount }}</span>
                            {% endif %}
                        </h4>
                    </div>

                    <!-- Table -->
                    {% if countdetailcount > 0 %}
                        <div id="collapseCountdetail" class="panel-body">
                            {% render_table countdetailtable %}
                        </div>
                        <!-- Data FullScreen Modal -->
                        <div class="modal fullscreen-modal fade" id="FsCountDetail" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        {% render_table countdetailtable %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>


{% endblock %}