{% extends 'base.html' %}

{% block title %}Mode d'emploi{% endblock %}

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

<p class="desktop-hidden mobile-content-title">
    {% block content_title %}La Chariotte - mode d'emploi{% endblock %}
  </p>
<div class="box">
    <p>Comment marche la Chariotte et qu'est-ce qu'on peut y faire ? Voilà commment vous pouvez :</p>
    <ul>
        <li><a href="#join_grouped_order">Rejoindre une commande et commander des produits</a></li>
        <li><a href="#pay">Payer (pas encore !)</a></li>
        <li><a href="#create_account">Créer un compte</a></li>
        <li><a href="#create_grouped_order">Créer une commande groupée</a></li>
        <li><a href="#add_item">Ajouter des produits à une commande groupée</a></li>
        <li><a href="#go_to_overview">Accéder à la page de gestion de ma commande groupée</a></li>
        <li><a href="#delete_item">Modifier des produits d'une commande après sa création</a></li>
        <li><a href="#edit_grouped_order">Modifier des informations de la commande</a></li>
        <li><a href="#share_grouped_order">Partager une commande à des participants</a></li>
        <li><a href="#print_orders_list">Imprimer ma liste de commandes</a></li>
        <li><a href="#get_spreadsheet">Voir les commandes sous forme de tableur</a></li>
    </ul>
</div>

<div class="box" id="join_grouped_order">
    <p class="title">Rejoindre une commande et commander des produits</p>
    <p>Pour rejoindre une commande groupée, il faut y avoir été invité.e par son organisateur.ice.
        Si vous avez un code à 6 caractères, vous pouvez l'entrer dans l'encadré "Rejoindre une commande groupée"
        sur la page d'accueil de la Chariotte.</p>
    <img class="notice-img" src="{% static 'img/notice/join_grouped_order.png' %}"/>
    <p>Sinon, cliquez sur le lien que l'organisateur.ice vous a envoyé. Vous arriverez sur la page de commande.</p>
    <img class="notice-img" src="{% static 'img/notice/order_form.png' %}"/>
</div>

<div class="box" id="pay">
    <p class="title">Payer (pas encore !)</p>
    <p>Pour l’instant, le paiement n’est pas pris en compte par le site de La Chariotte, 
        c’est l’organisateur.ice qui doit vous indiquer les modalités de paiement.</p>
</div>

<div class="box" id="create_account">
    <p class="title">Créer un compte</p>
    <p>1. Cliquez sur “Créer un compte”.</p>
    <img class="notice-img" src="{% static 'img/notice/create_account.jpg' %}"/>
    <p>2. Remplissez toutes les informations du formulaire, puis cliquez sur valider.</p>
    <img class="notice-img" src="{% static 'img/notice/create_account_form.jpg' %}"/>
    <p>3. Vous pouvez maintenant vous connecter.</p>
</div>

<div class="box" id="create_grouped_order">
    <p class="title">Créer une commande groupée</p>
    <p>1. En ayant un compte (nécessaire seulement pour les organisateurs!), vous aurez accès à une page de gestion des commandes groupées en cliquant sur le menu “Mes commandes groupées”.</p>
    <img class="notice-img" src="{% static 'img/notice/my_grouped_orders.jpg' %}"/>
    <p>2. C’est depuis cette page que vous pourrez créer une nouvelle commande en cliquant sur le bouton “Créer une nouvelle commande groupée” : </p>
    <img class="notice-img" src="{% static 'img/notice/create_grouped_order.jpg' %}"/>
    <p>3. Quelques informations vous seront alors demandées  :</p>
    <img class="notice-img" src="{% static 'img/notice/create_grouped_order_form.jpg' %}"/>
    <p>4. En cliquant sur "Suivant", votre commande groupée sera validée.</p>
</div>

<div class="box" id="add_item">
    <p class="title">Ajouter des produits à une commande groupée</p>
    <p>Directement après avoir validé la commande groupée, vous accédez à la page de gestion des produits.</p>
    <img class="notice-img" src="{% static 'img/notice/add_item.png' %}"/>
    <p>Ici, vous pouvez renseigner les produits qui constitueront votre commande groupée. 
        Indiquez le nom du produit, son prix et la quantité disponible. 
        Cliquez sur “Ajouter” pour  valider l’ajout.</p>
        <img class="notice-img" src="{% static 'img/notice/add_item_2.png' %}"/>
</div>

<div class="box" id="go_to_overview">
    <p class="title">Accéder à la page de gestion de ma commande groupée</p>
    <p>Depuis le menu “Mes commandes groupées”, puis en cliquant sur le nom de la commande groupée
         que vous voulez gérer, vous pourrez cliquer ensuite sur “Gestion de la commande groupee”.
        </p>
    <img class="notice-img" src="{% static 'img/notice/go_to_overview.png' %}"/>
    <p>Sinon depuis la page “Mes commandes groupées” il est aussi possible de cliquer directement sur 
        l’icone de la ligne "liste" de la commande groupée que vous voulez gérer.</p>
</div>

<div class="box" id="delete_item">
    <p class="title">Modifier des produits d'une commande après sa création</p>
    <p>1. Si vous souhaitez modifier une information concernant la commande (titre, date, description, lieu de livraison, …), 
        il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
    <p>2. Ensuite, dans "Résumé de la commande”, cliquez sur “Gérer les produits”.</p>
    <img class="notice-img" src="{% static 'img/notice/grouped_order_sum_up.png' %}"/>
    <img class="notice-img" src="{% static 'img/notice/items_overview.png' %}"/>
    <p>3. Vous êtes maintenant sur la page de gestion des produits depuis laquelle vous pouvez ajouter ou supprimer des produits.
        Cliquez sur “Valider” pour sauvegarder les modifications.</p>
    <p>Attention : actuellement, il n'est pas possible de supprimer un produit une fois qu'il a été commandé par un.e participant.e. 
        Si vous voulez vraiment le supprimer, il faudra d'abord supprimer les commandes des participant.e.s concerné.e.s.</p>
</div>

<div class="box" id="edit_grouped_order">
    <p class="title">Modifier des informations de la commande</p>
    <p>1. Si vous souhaitez modifier une information concernant la commande (titre, date, description, lieu de livraison, …), 
        il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
    <p>2. Vous pouvez ensuite cliquer sur le bouton “Modifier la commande” 
    qui vous amenera vers le formulaire pre-rempli des informations de la commande. </p>
    <img class="notice-img" src="{% static 'img/notice/edit_grouped_order.png' %}"/>
    <p>3. Modifiez les informations que vous voulez, puis cliquez sur “Suivant” pour valider.</p>
</div>

<div class="box" id="share_grouped_order">
    <p class="title">Partager une commande à des participants</p>
    <p>Une fois votre commande bien préparée (quantité et prix des produits corrects, informations de la commande justes, …),
         il faut maintenant la partager à des participants pour qu’il puissent commander.</p>
    <p>1. Depuis la page de <a href="#go_to_overview">gestion de la commande</a>, 
        allez dans l’onglet “partager et exporter”.</p>
    <img class="notice-img" src="{% static 'img/notice/share_grouped_order.png' %}"/>
    <p>2. Vous pouvez copier le lien, et l’envoyer à vos connaissances.</p>
    <img class="notice-img" src="{% static 'img/notice/copy_link.png' %}"/>
</div>

<div class="box" id="print_orders_list">
    <p class="title">Imprimer ma liste de commandes</p>
    <p>1. Pour cela, il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
    <p>2. Ensuite, dans "Partager et exporter”, cliquez sur “Commandes en PDF”.</p>
    <img class="notice-img" src="{% static 'img/notice/print_orders_list.png' %}"/>
    <p>3. Cela lance le téléchargement de votre liste de commandes en PDF.</p>
</div>

<div class="box" id="get_spreadsheet">
    <p class="title">Voir les commandes sous forme de tableur</p>
    <p>1. Pour cela, il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
    <p>2. Ensuite, dans "Partager et exporter”, cliquez sur “Commandes en CSV”.</p>
    <img class="notice-img" src="{% static 'img/notice/get_spreadsheet.png' %}"/>
    <p>3. Le format CSV vous permet d'ouvrir le fichier avec le tableur de votre choix (libreoffice, excel, ...).</p>
</div>
{% endblock %}