{{ define "main" }}
  {{ $heroBg := resources.Get "images/visuels/incontournable-haut-pays-velay.jpg" }}
  <section class="hero" {{ if $heroBg }}style="background-image: url('{{ $heroBg.RelPermalink }}')"{{ end }}>
    <h1 class="hero-headline">
      <span class="text-primary">{{ site.Params.hero.line1before }}</span> <span class="text-highlight">{{ site.Params.hero.line1highlight }}</span> <span class="text-primary">{{ site.Params.hero.line1after }}</span><br>
      <span class="text-highlight">{{ site.Params.hero.line2highlight }}</span> <span class="text-primary">{{ site.Params.hero.line2after }}</span>
    </h1>
  </section>

  <section class="search-block">
    <h2 class="search-title">{{ site.Params.search.title }}</h2>
    <form class="search-form">
      {{ $iconLocation := resources.Get "images/picto/location_on_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
      {{ $iconCalendar := resources.Get "images/picto/calendar_today_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
      {{ $iconSchedule := resources.Get "images/picto/schedule_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
      {{ $iconSearch := resources.Get "images/picto/search_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}

      {{ $iconSwap := resources.Get "images/picto/sync_alt_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}

      <div class="form-group-locations">
        <div class="form-group">
          <label for="depart">
            {{ if $iconLocation }}<img src="{{ $iconLocation.RelPermalink }}" alt="" class="label-icon" />{{ end }}
            {{ site.Params.search.labelDepart }}
          </label>
          <input type="text" id="depart" name="depart" placeholder="" />
        </div>

        <button type="button" class="swap-btn" onclick="swapLocations()" aria-label="Inverser départ et destination">
          {{ if $iconSwap }}<img src="{{ $iconSwap.RelPermalink }}" alt="" />{{ end }}
        </button>

        <div class="form-group">
          <label for="destination">
            {{ if $iconLocation }}<img src="{{ $iconLocation.RelPermalink }}" alt="" class="label-icon" />{{ end }}
            {{ site.Params.search.labelDestination }}
          </label>
          <input type="text" id="destination" name="destination" placeholder="" />
        </div>
      </div>

      <div class="form-group-row">
        <div class="form-group">
          <label for="date">
            {{ if $iconCalendar }}<img src="{{ $iconCalendar.RelPermalink }}" alt="" class="label-icon" />{{ end }}
            {{ site.Params.search.labelDate }}
          </label>
          <input type="date" id="date" name="date" />
        </div>

        <div class="form-group">
          <label for="heure">
            {{ if $iconSchedule }}<img src="{{ $iconSchedule.RelPermalink }}" alt="" class="label-icon" />{{ end }}
            {{ site.Params.search.labelHeure }}
          </label>
          <input type="time" id="heure" name="heure" />
        </div>
      </div>

      <button type="submit" class="search-btn">
        {{ if $iconSearch }}<img src="{{ $iconSearch.RelPermalink }}" alt="" class="btn-icon" />{{ end }}
        {{ site.Params.search.buttonText }}
      </button>
    </form>
  </section>

  <section class="video-block">
    <h2 class="video-title">{{ site.Params.video.title }}</h2>
    {{ $video := resources.Get "videos/video_presentation_mms43.mp4" }}
    {{ if $video }}
      <div class="video-container">
        <video controls>
          <source src="{{ $video.RelPermalink }}" type="video/mp4" />
          Votre navigateur ne supporte pas la lecture de vidéos.
        </video>
      </div>
    {{ end }}
  </section>

  {{ .Content }}
{{ end }}