<!--Start Layout-->
{{#> default }}

<section x-data="blog()" class="w-full bg-muted-100 dark:bg-muted-900">
  <div class="w-full max-w-7xl mx-auto pb-24">
    <div class="w-full flex items-center overflow-hidden">
      <!--Content-->
      <div
        class="
          w-full
          h-full
          flex flex-col
          justify-between
          px-6
          pt-36
          lg:pt-36
          pb-16
        "
      >
        <!--Title-->
        <div class="w-full max-w-3xl mx-auto space-y-4 text-center mb-6">
          <!--Badge-->
          <span
            class="
              inline-block
              font-sans
              text-xs
              py-1.5
              px-3
              m-1
              rounded-lg
              bg-primary-100
              text-primary-500
              dark:bg-primary-500 dark:text-white
            "
          >
            Job Offers
          </span>
          <h1
            class="
              font-heading font-extrabold
              text-5xl
              md:text-5xl
              text-muted-800
              dark:text-white
            "
          >
            Browse Jobs.
          </h1>
          <p
            class="
              font-sans
              text-base
              md:text-lg
              text-muted-500
              dark:text-muted-400
            "
          >
            Search your career opportunity through 21,963 job offers.
          </p>
        </div>

        <!--Search-->
        <div class="w-full max-w-5xl mx-auto">
          <!--Search bar-->
          {{> jobs/jobs-search}}
        </div>
      </div>
    </div>

    <div
      class="w-full flex flex-col ltablet:flex-row lg:flex-row gap-y-8 py-12"
    >
      <!--Meta column-->
      <div
        class="
          hidden
          ltablet:block
          lg:block
          w-full
          ptablet:w-3/4
          ltablet:w-1/4
          lg:w-1/4 lg:pl-6
          ptablet:mx-auto
          border-r border-muted-200
          dark:border-muted-800
        "
      >
        <!--Filters-->
        <div class="space-y-10">
          <!--Filter group-->
          {{> jobs/filter-widget-contract}}

          <!--Filter group-->
          {{> jobs/filter-widget-experience}}

          <!--Filter group-->
          {{> jobs/filter-widget-industry}}
        </div>
      </div>
      <!--Content column-->
      <div class="w-full ltablet:w-3/4 lg:w-3/4 ptablet:mx-auto">
        <div class="px-4 ltablet:px-8 lg:px-12">
          <h4
            class="
              font-heading font-semibold
              text-lg text-muted-800
              dark:text-white
              mb-6
            "
          >
            Showing 874 job offers
          </h4>

          <!--Jobs grid-->
          {{> jobs/jobs-grid}}

          <!--Pagination-->
          {{> jobs/jobs-pagination}}
        </div>
      </div>
    </div>
  </div>
</section>

<!--End Layout-->
{{/default}}
