{{define "app_tile" }}
<div class="tile is-parent is-4">
  <article class="app-tile tile is-child" data-controller="app-tile">
    <div class="front notification">
      <p class="title">{{ .Manifest.Title }}</p>
      <p class="subtitle">{{ index .Manifest.Tags 0 }}</p>
      <div class="level is-mobile">
        <div class="level-left">
          <div class="level-item">
            <div class="buttons">
              {{if .Manifest.Options.HighscoresEnabled}}
              <a class="button is-outlined is-link is-medium" 
                href="highscores/{{ .Manifest.ID }}">
                <svg class="icon">
                  <use xlink:href="#trophy"></use>
                </svg>
              </a>
              {{end}}
              {{ if .Manifest.Description }}
              <button data-action="click->app-tile#flip"
                class="button is-outlined is-info is-medium">
                <svg class="icon">
                  <use xlink:href="#question"></use>
                </svg>
              </button>
              {{ end }}
            </div>
          </div>
          
        </div>
        <div class="level-right">
          <div class="level-item">
            <a class="button is-primary is-medium has-no-shadow" 
              href="apps/{{ .Manifest.ID }}">
              <span>Ouvrir</span>
              <svg class="icon">
                <use xlink:href="#chevron-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    {{ if .Manifest.Description }}
    <div class="back notification" data-action="click->app-tile#flip">
      <div class="content">
        {{ markdown .Manifest.Description }}
      </div>
    </div>
    {{ end }}
  </article>
</div>
{{end}}