{% extends 'base.html' %}

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

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

{% if user.is_authenticated %}
<div class="buttons is-centered mt-3">
  <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>
  <a class="button is-primary" href="{% url 'order:place_index' %}">
    <i class="fa fa-home mr-3" aria-hidden="true"></i>Mes lieux de distribution
  </a>
</div>
{% endif %}

<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.order_code.errors %}
        <p class="help is-danger">{{ error }}</p>
        {% endfor %}
        <div class="field has-addons">
          <div class="control">
            <input name="order_code" class="input {% if form.order_code.errors %}is-danger{% endif %}" type="text">
          </div>
          <div class="control">
            <input class="button is-primary" type="submit" value="Rejoindre une commande">
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="column is-half">
    <div class="box full-height">
      <p class="subtitle">Rejoindre un lieu de distribution</p>
      <p>Si vous avez un code de lieu, entrez-le ici :</p>
      <form method="post">
        {% csrf_token %}
        {% for error in form.place_code.errors %}
        <p class="help is-danger">{{ error }}</p>
        {% endfor %}
        <div class="field has-addons">
          <div class="control">
            <input name="place_code" class="input {% if form.place_code.errors %}is-danger{% endif %}" type="text">
          </div>
          <div class="control">
            <input class="button is-primary" type="submit" value="Rejoindre un lieu">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% if not user.is_authenticated %}
<div class="columns is-centered">
  <div class="column is-centered is-half">
    <div class="box">
      <p class="subtitle">... Ou connectez-vous pour organiser une commande groupée</p>
      <div class="buttons is-centered mt-3">
        <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>
    </div>
  </div>
</div>
{% endif %}
<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 %}