{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block title %}Home{% endblock %}
{% block meta %}
  <meta name="description"
        content="{% trans "Pflänz.li is a platform to trade plants." %}">
{% endblock %}
{% block background %}home-background{% endblock %}
{% block content %}
  <div class="p-5 mb-4 bg-body-tertiary rounded-3 home-opaque">
    <div class="container-fluid py-5 position-relative row d-flex align-items-center justify-content-center">
      <div class="home-background"></div>
      <div class="pfl-home-logo xl-align-self-center col-lg h-100 mb-3"></div>
      <div class="col-lg text-center text-lg-start">
        <h1 class="display-5 fw-bold">{% trans "Welcome to Pflänz.li" %}</h1>
        <p class="fs-4">
          {% trans "This is a platform to trade plants. You can offer plants and setup a wishlist what you want to trade it for." %}
        </p>
        <hr />
        <p>{% trans "To offer your plants, please register first." %}</p>
        <a href="{% url "list_offers" %}"
           class="btn btn-pfl btn-lg mb-3"
           type="button">{% trans "Show offers" %}</a>
        <a href="{% url "register_user" %}"
           class="btn btn-pfl-secondary btn-lg mb-3"
           type="button">{% trans "Register" %}</a>
      </div>
    </div>
  </div>
  <div class="p-5 mb-4 bg-body-tertiary rounded-3 home-opaque">
    <h2 class="h1 mx-auto text-center mb-3">{% trans 'How does Pflänz.li work?' %}</h2>
    <div class="info-container mx-auto">
      <div class="row d-flex align-items-center">
        <div class="col-md-6 order-md-1">
          <div class="info-icon plant-1-icon w-100"></div>
        </div>
        <div class="col-md-6 order-md-2 text-center">
          <h2>1. {% trans "Your plant" %}</h2>
          <p>
            {% trans 'You have a plant that you would like to trade for another plant? Great, that is exactly what Pflänz.li is for!' %}
          </p>
        </div>
      </div>
      <div class="row d-flex align-items-center">
        <div class="col-md-6 order-md-2">
          <div class="info-icon frame-1-icon w-100"></div>
        </div>
        <div class="col-md-6 order-md-1 text-center">
          <h2>2. {% trans "Offer your plant " %}</h2>
          <p>
            {% trans 'Create an offer on Pflänz.li so others can see what you offer. You can also setup your wishlist to show others what you would like to trade for.' %}
          </p>
        </div>
      </div>
      <div class="row d-flex align-items-center">
        <div class="col-md-6 order-md-1">
          <div class="info-icon frame-2-icon w-100"></div>
        </div>
        <div class="col-md-6 order-md-2 text-center">
          <h2>3. {% trans "Find your dream plant" %}</h2>
          <p>{% trans "Use the search functions of Pflänz.li to find a suitable plant near you." %}</p>
        </div>
      </div>
      <div class="row d-flex align-items-center">
        <div class="col-md-6 order-md-2 d-flex">
          <div class="info-icon trade-icon w-100"></div>
        </div>
        <div class="col-md-6 order-md-1 text-center">
          <h2>4. {% trans "Trade" %}</h2>
          <p>
            {% trans "When you have found someone with a plant who is willing to trade, you can directly discuss the details of the trade, like when and where." %}
          </p>
        </div>
      </div>
      <div class="row d-flex align-items-center">
        <div class="col-md-6 order-md-1">
          <div class="info-icon plant-2-icon w-100"></div>
        </div>
        <div class="col-md-6 order-md-2 text-center">
          <h2>5. {% trans "Your new plant" %}</h2>
          <p>
            {% trans "Congratulations, you just got a new plant! Take good care of it and maybe you can use it to trade in the future." %}
          </p>
        </div>
      </div>
      <hr>
      <div class="row d-flex justify-content-center mx-auto mt-4">
        <h3 class="text-center mb-3">{% trans "If you have other questsions, check out the FAQ!" %}</h3>
        <a class="btn btn-pfl w-25" href="{% url "faq" %}">FAQ</a>
      </div>
    </div>
  </div>
{% endblock %}