{% extends 'careers/base.html' %}{% load i18n wagtailcore_tags %}

<!---->
{% block title %}{{ block.super }} | {% trans 'Jobs' %}{% endblock %}

<!---->
{% block content %}
<div class="container mx-auto px-4 py-20">
  <section class="grid gap-8">
    <div
      class="prose mx-auto prose-sm prose-video:rounded-box xl:prose-lg 2xl:prose-xl prose-headings:text-primary prose-img:rounded-box prose-img:w-full prose-pre:bg-base-200 prose-pre:border prose-pre:border-base-300"
    >
      <h1>{% trans "Jobs" %}</h1>
      <p>
        {% blocktrans trimmed %}Explore our current job openings and discover
        opportunities that match your passions. Use filters to tailor results
        and easily apply with your latest resume.{% endblocktrans %}
      </p>
    </div>

    <div class="flex items-center justify-end">
      <div
        data-tip="{% trans 'Filters' %}"
        class="tooltip tooltip-left rtl:tooltip-right tooltip-primary"
      >
        <button
          onclick="filters.showModal()"
          class="btn btn-square btn-sm btn-primary md:btn-md"
        >
          <i data-lucide="filter" class="size-4"></i>
          <span class="sr-only"> {% trans 'Filters' %} </span>
        </button>
      </div>
    </div>

    <ol class="grid grid-cols-12 grid-rows-[auto] gap-4">
      {% for job in job_list %}
      <li
        role="article"
        class="group col-span-12 row-span-12 md:col-span-6 md:row-span-3 lg:col-span-4 2xl:col-span-3"
      >
        <div
          class="card border border-base-300 relative bg-base-100 hover:bg-base-200 card-sm md:card-md xl:card-lg 2xl:card-xl size-full shadow"
        >
          <a href="{% pageurl job %}" class="absolute inset-0 z-10">
            <span class="sr-only">{% trans 'View' %}</span>
          </a>

          <div class="card-body p-4">
            <h2 class="card-title text-primary">{{ job.title }}</h2>

            <p class="grow-0">{{ job.description }}</p>

            <div class="card-actions items-center">
              <div
                class="tooltip tooltip-primary z-20"
                data-tip="{% trans 'Category' %}"
              >
                <a
                  href="{% pageurl job.get_parent %}"
                  class="badge badge-soft badge-primary badge-xs md:badge-sm"
                >
                  {{ job.get_parent }}
                </a>
              </div>

              {% if job.is_remote %}
              <div
                class="tooltip tooltip-primary z-20"
                data-tip="{% trans 'Remote' %}"
              >
                <a
                  href="{% url 'careers:jobs' %}?is_remote=True"
                  class="badge badge-primary badge-xs md:badge-sm"
                >
                  {% trans 'Remote' %}
                </a>
              </div>
              {% endif %}

              <!---->
              {% if job.country %}
              <div
                class="tooltip tooltip-success z-20"
                data-tip="{{ job.country.name }}"
              >
                <a
                  href="{% url 'careers:jobs' %}?country={{ job.country }}"
                  class="badge badge-success badge-xs md:badge-sm"
                >
                  {{ job.country }}
                </a>
              </div>
              {% endif %}

              <div
                class="tooltip tooltip-secondary z-20"
                data-tip="{% trans 'Seniority level' %}"
              >
                <a
                  href="{% url 'careers:jobs' %}?level={{ job.level }}"
                  class="badge badge-secondary badge-xs md:badge-sm"
                >
                  {{ job.level }}
                </a>
              </div>

              <div
                class="tooltip tooltip-info z-20"
                data-tip="{% trans 'Job type' %}"
              >
                <a
                  href="{% url 'careers:jobs' %}?type={{ job.type }}"
                  class="badge badge-info badge-xs md:badge-sm"
                >
                  {{ job.type }}
                </a>
              </div>

              <span
                class="tooltip tooltip-primary z-20"
                data-tip="{% trans 'Date published' %}"
              >
                <span
                  class="badge badge-soft badge-xs md:badge-sm badge-primary"
                >
                  {{ job.latest_revision_created_at|date:'Y/m/d' }}
                </span>
              </span>
            </div>
          </div>
        </div>
      </li>
      {% endfor %}
    </ol>

    {% include 'careers/components/pagination.html' %}
  </section>
</div>

<dialog id="filters" class="modal">
  <section
    class="relative modal-box border border-base-300 grid max-w-xl gap-6 bg-base-100/50 shadow-xl backdrop-blur-3xl"
  >
    <header class="flex items-center justify-between gap-4 text-primary">
      <h1 class="text-lg font-semibold lg:text-2xl">{% trans 'Filters' %}</h1>

      <div
        class="tooltip tooltip-left rtl:tooltip-right tooltip-error"
        data-tip="{% trans 'Close' %}"
      >
        <button
          onclick="filters.close()"
          class="btn btn-square btn-soft btn-primary hover:btn-error"
        >
          <i data-lucide="x" class="size-4 lg:size-6"></i>

          <span class="sr-only">{% trans 'Close' %}</span>
        </button>
      </div>
    </header>

    <main>
      {% include 'careers/components/form.html' with method='get' csrf=False
      form=filter.form %}
    </main>
  </section>
</dialog>
{% endblock %}