{% extends 'base.html' %}
{% block title %}Accueil{% endblock %}
{% block content %}
  {% load static %}
  <div class="container p-6">
    <section class="hero">
      <div class="hero-body">
        <img class="image is-128x128"
             src="{% static 'img/logos/logo_la_chariotte.png' %}" />
        <p class="title">Un outil au service des commandes groupées</p>
        <p class="subtitle">
          La Chariotte est pensée pour vous aider à organiser des commandes groupées !
          Que vous soyez producteur ou productrice, simple passant·e curieux·se,
          ou expert·e des groupements d'achats en tout genre, la Chariotte vous réserve des rencontres,
          des bons produits locaux et bien plus.
        </p>
      </div>
    </section>
    <div class="columns">
      <div class="column is-half">
        <div class="box full-height">
          <p class="subtitle">Rejoignez une commande groupée…</p>
          <p>Code à 6 caractères (si disponible)</p>
          <form method="post">
            {% csrf_token %}
            {% for error in form.code.errors %}<p class="help is-danger">{{ error }}</p>{% endfor %}
            <div class="field has-addons">
              <div class="control">
                <input name="code"
                       class="input {% if form.code.errors %}is-danger{% endif %}"
                       type="text">
              </div>
              <div class="control">
                <input class="button is-primary" type="submit" value="Rejoindre">
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="column is-half">
        {% if user.is_authenticated %}
          <div class="box full-height">
            <p class="subtitle">… ou accédez à vos commandes groupées</p>
            <a class="button is-primary" href="{% url 'order:index' %}">
              <i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Mes commandes groupées
            </a>
          </div>
        {% else %}
          <div class="box full-height">
            <p class="subtitle">... ou connectez-vous</p>
            <p>pour organiser une commande groupée</p>
            <a class="button is-primary" href="{% url 'accounts:login' %}">
              <i class="fa fa-sign-in mr-3" aria-hidden="true"></i>Se connecter
            </a>
            <a class="button is-light" href="{% url 'accounts:signup' %}">
              <strong>Créer un compte</strong>
            </a>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}