{{ define "main" }}
<section class="hero">
  <div class="">
    <h1 class="">{{T "hero.heading"}}</h1>
    <p class="">{{T "hero.description"}}</p>
  </div>
  <div class="tags_categories">
    <div class="category_list">

      <h3 class="">
        <img src="/icons/categories.svg" alt="" class="">
        {{T "categories"}}
      </h3>
      <ul>
        {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
        <li class="chip">
          <a href="{{ " /categories/" | relLangURL }}{{ $name | urlize }}/">{{ $name }}</a>
        </li>
        {{ end }}
      </ul>
    </div>

    <div class="tags_list">

      <h3 class="">
        <img src="/icons/hastag.svg" alt="" class="">
        {{T "tags"}}
      </h3>
      <ul>
        {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
        <li class="chip">
          <a href="{{ " /tags/" | relLangURL }}{{ $name | urlize }}/">{{ $name }}</a>
        </li>
        {{ end }}
      </ul>
    </div>
  </div>
</section>

<button class="story-btn" id="createStoryBtn">{{T "submitButtonLabelText"}}</button>
<dialog class="story_dialog">
  <button id="closeStoryModal" autofocus>Close</button>
  <iframe src="https://ai.odoo4projects.com/form/345c0f2c-8764-4094-8a5d-1be9c2ed86ef" frameborder="1"></iframe>
</dialog>

<!-- stories -->
<section class="story__grid">
  {{ $posts := where .Site.RegularPages "Section" "stories" }} {{ range
  (sort $posts "Date" "desc") }}
  <article class="story__card">

    <img src="{{.Params.image}}" alt="{{ .Title }}" class="story__coverImg" loading="lazy">
    <div class="story__card__details">
      <a href="{{.Permalink}}" target="_self">
        <h4 class="card__title">{{ .Title }}</h4>
      </a>
      <p class="card__description">
        {{.Params.description}}
      </p>

      <div class="card__tags_categories">
        {{ range .Params.categories }}
        <a href="" class="category__chip">
          {{.}}
        </a>
        {{ end }}
        {{ range .Params.tags }}
        <a href="" class="tag__chip">
          <span class="hastag">#</span>{{.}}
        </a>
        {{ end }}

      </div>
<div class="publish__date__timeToRead">
<!-- publish date -->
  <div class="publish__date">
    <img src="/icons/calender.svg" class="story__card__icon" alt="">
    <time datetime="">{{ .PublishDate |time.Format ":date_medium" }}</time>
  </div>

  <!-- time to read -->
  <div class="publish__date">
    <img src="/icons/hourglass.svg" class="story__card__icon" alt="">
    <time datetime="">{{ .ReadingTime }} {{T "minutesToRead"}} </time>
  </div>
</div>

  <!-- author -->
  <div class="publish__date">
    <img src="/icons/person.svg" class="story__card__icon" alt="">
    <time datetime="">{{ .Params.author }}</time>
  </div>
    </div>
  </article>
  {{end}}
</section>
{{ end }}