{% extends "base.html" %}

{% block content %}
<div class="w-full bg-moxxy-purple p-8 flex flex-row justify-center h-fit">
    <div class="lg:w-1/2 grid grid-cols-2 gap-4">
      <div class="grid grid-cols-1 place-items-center">
        <span class="text-neutral-100 text-2xl text-center">{{ config.extra.heroText }}</span>
      </div>
      <div class="grid grid-rows-1 place-items-center">
        <img class="rounded-md h-64 lg:h-96" src="{{ get_url(path=config.extra.mainScreenshot) }}" />
      </div>
    </div>
  </div>
  
  <div class="w-full p-8">
    <div class="flex flex-col items-center">
      <div class="flex flex-wrap gap-4">
        {% for badge in config.extra.badges %}
        <a href="{{ badge.url }}">
          <img class="h-24 md:h-16" src="{{ get_url(path=badge.image)}}" />
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
  
  <div class="w-full p-8">
    <div class="flex flex-col items-center">
      <div>
        <h1 class="text-3xl font-bold pb-4 place-self-start">Features</h1>
  
        <ul class="list-disc px-4">
            {% for feature in config.extra.features %}
            <li>{{ feature }}</li>
            {% endfor %}
        </ul>
      </div>
    </div>
  </div>
  
  <div class="w-full p-8">
    <div class="flex flex-col items-center">
      <div>
        <h1 class="text-3xl font-bold pb-4 place-self-start">Screenshots</h1>
  
        <div class="flex flex-nowrap gap-8 overflow-scroll">
            {% for screenshot in config.extra.screenshots %}
            <img class="h-96 rounded-md" src="{{ get_url(path=screenshot) }}" />
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}