{{ define "home" }}

{{ template "header" . }}
<div {{ with $.platform_css }} class="{{.}}" {{ end }}>
  <span class="platform-flag">
    {{$.platform_name}}
  </span>
</div>
<main role="main" class="home">
  <section class="jumbotron text-center mb-0 h-jumbotron">
    <div class="container">
      <img src="/static/icons/Hipster_HeroLogo.svg" alt="icon" class="icon search-icon" />
    </div>
  </section>

  <div class="h-grid py-5 bg-light">
    <div class="container">
      <div class="row h-row">
        <img src="/static/icons/Hipster_HotProducts.svg" alt="icon" class="icon search-icon" />
      </div>
      <div class="row">
        {{ range $.products }}
        <div class="col-md-4">
          <div class="h-card card mb-4 box-shadow">
            <a href="/product/{{.Item.Id}}">
              <img alt="" style="width: 100%; height: auto;" src="{{.Item.Picture}}">
              <div class="card-hover"></div>
            </a>
            <div class="card-body h-card-body">
              <h5 class="card-title h-card-title">
                {{ .Item.Name }}
              </h5>
              <div class="d-flex justify-content-center align-items-center">
                <small class="text-muted">
                  {{ renderMoney .Price }}
                </small>
              </div>
            </div>
          </div>
        </div>
        {{ end }}
      </div>
    </div>
  </div>
</main>

{{ template "footer" . }}

{{ end }}