{% extends "layout.html" %}
{% load i18n %}

{% block title %}{% trans "About us" %}{% endblock %}

{% block content %}
<hr class="my-4"/>

<div class="container py-2">
  <div class="row justify-content-center">
    {% if about_us %}
    <div class="col-lg-10">

      {% if about_us.lead_title or about_us.lead_content %}
      <div class="about-header mb-4">
        <h1 class="h3 mb-2">{{about_us.lead_title|safe}}</h1>
        <p class="mb-0 text-body-secondary">
         {{ about_us.lead_content|safe }}
        </p>
      </div>
      {% endif %}

      {% if about_us.subsections %}
      {% for subsection in about_us.subsections %}
      {% if subsection.subtitle != "<p>&nbsp;</p>" and subsection.subcontent != "<p>&nbsp;</p>" %}
      
        <div class="about-panel about-panel--{{ forloop.counter|divisibleby:2|yesno:"primary,secondary" }} mb-3">
            
          <h2 class="h5 mb-2">{{ subsection.subtitle|safe }}</h2>
       

          <p class="mb-0 text-body-secondary">
        {{ subsection.subcontent|safe }}
          </p>
        </div>
      {% endif %}
      {% endfor %}
      {% endif %}
  
      <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center mt-4">
        <a href="{% url 'website:contact' %}" class="btn btn-primary px-4">
          {% trans "Contact us" %}
        </a>
        <a href="{% url 'website:services' %}" class="btn btn-outline-primary px-4">
          {% trans "View services" %}
        </a>
      </div>
    </div>
    {% else %}
      <div class="col-lg-10">
        <div class="alert alert-info" role="alert">
          {% trans "No About Us content available at the moment." %}
          {% if request.user.is_authenticated and request.user.is_staff %}
          <div class="mt-2">
            {% url 'dashboard:about_us_new' as about_us_url %}
            {% blocktrans with url=about_us_url %}
            Add <a href="{{ url }}">About Us content</a> in the dashboard to display it here.
            {% endblocktrans %} 
        </div>
        {% endif %}
      </div>
      </div>
      {% endif %}
  </div>
</div>

{% endblock %}