{% extends "index.html" %}

{% block hero %}{% endblock hero%}

{% block header %}
<header class="box-shadow">
  {% if lang =="en" %}
  {% set path = [""] | concat(with=section.components) | join(sep="/") %}
  {% else %}
  {% set path = [""] | concat(with=section.components | slice(start=1)) | join(sep="/") %}
  {% endif %}

  {{ macros::render_header(path=path) }}
</header>

{% endblock header %}

{% block content %}


<div class="content text">
  {{ section.content | safe}}
  <h1>
    IT Solutions
  </h1>
  <p>
    Examples of things we can host for you or help you host it yourself.
  </p>

</div>
<div class="card-container">
  <ul class="list">
    {% for card_path in section.subsections %}
    {% set card = get_section(path=card_path) %}

    <div class="card trunc" _="on click toggle .trunc on me">
      <img class="icon" src="/{{ card.extra.icon }}">
      <h2> {{ card.title }} </h2>
      <p class="text">
        {{ card.content | markdown(inline=true) | safe }}
      </p>
      <div class="footer" _="on click halt the event's bubbling">
        {% set footer = get_section(path=card.subsections[0]) %}
        {{ footer.content | markdown(inline=true) | safe }}
        <div class="apps">
          {% for page in footer.pages %}
          {{ page.content | markdown(inline=true) | safe }}
          {% endfor %}
        </div>

      </div>
    </div>
    {% endfor %}
  </ul>
</div>

{% endblock content %}