{% extends 'base.html' %}

{% block title %}Tableau de bord{% endblock %}

{% block content %}
{% load static %}

<p class="desktop-hidden mobile-content-title">
  {% block content_title %}Bienvenue{% if user.is_authenticated %}, {{ user.first_name }}{% else %} sur la Chariotte !{% endif %}{% endblock %}
</p>
<div class="columns">
  <div class="column is-half">
    <div class="box full-height">
      <p class="subtitle">Rejoindre une commande groupée</p>
      <p>Si vous avez un code à 6 caractères, entrez-le ici :</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">
    <div class="box full-height">
      {% if user.is_authenticated %}
      <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>
      {% else %}
      <p class="subtitle">... Ou connectez-vous 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>
      {% endif %}
    </div>
  </div>
</div>
<div class="columns is-centered">
  <div class="column is-10">
    <div class="box">
      <p class="title">La Chariotte, outil au service des commandes groupées</p>
      <p>Bienvenue sur la Chariotte, 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 class="buttons is-centered">
        <a class="button is-info" href="{% url 'about_chariotte' %}">
          <i class="fa fa-info-circle mr-3" aria-hidden="true"></i>En savoir plus sur la Chariotte
        </a>
      </div>
    </div>
    
  </div>
</div>
{% endblock %}