{% extends "main.html" %}
{% load static %}
{% load presentation %}
{% load thumbnails %}

{% block title %}{{ club.type }} — {{ club.nom }}{% endblock %}

{% block head %}
  <script type="text/javascript" src="{% static "club/obfuscate.js" %}"></script>
{% endblock %}

{% block content %}
<div class="default-container">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'club:liste' %}">Clubs et associations</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ club.nom }}</li>
    </ol>
  </nav>

  <h1>{{ club.nom }}</h1>
  <div class="row pt-2">
    <div class="col-md-3 mb-4" style="min-width:270px">
      {% if club.logo %}
      <img src="{{ club.logo|thumbnail:"x224" }}" class="rounded d-block mx-auto mb-4 mb-3"
        style="object-fit:cover; width:224px; height:126px">
      {% endif %}
      <fieldset class="card mb-3">
        <div class="card-body">
          <legend>Contacts</legend>
          {% if club.nb_contacts == "xxxx" %}
          Pas d'informations…
          {% else %}
          {% liste_sep club.lien_web br %}
          {% liste_sep club.lien_blog br %}
          {% liste_sep club.mailAlias br %}
          {% liste_sep club.local br %}
          {% endif %}
        </div>
      </fieldset>
    </div>

    <div class="col-md">
      <fieldset class="card mb-3">
        <div class="card-body">
          <legend>Description</legend>
          {{ club.description.as_html|default:"<em>Ce club n'a pas encore de description</em>"|safe }}
        </div>
      </fieldset>
      <fieldset class="card mb-3">
        <div class="card-body">
          <legend>Informations</legend>
          <strong>Type</strong> : {{ club.type }}<br>
          <strong>Activité</strong> : {{ club.activite }}<br>
          <strong>École</strong> : {{ club.ecole.nom_commun }}<br>
        </div>
      </fieldset>

      <fieldset class="card mb-3">
        <div class="card-body">
          <legend>Bureau</legend>
          {% liste_sep club.president br %}
          {% liste_sep club.vicePresident br %}
          {% liste_sep club.tresorier br %}
          {% liste_sep club.secretaire br %}
        </div>
      </fieldset>
    </div>
  </div>
</div>
{% endblock %}