{% if request.headers.get('hx-request') != "true" %}
  <div x-data='{ "current": null, "total_mode": "T" }' class="mt-1">
{% endif %}

<div
  class="block steam"
  hx-get="/m/steam"
  hx-trigger="every 1m"
  hx-swap="outerHTML"
  hx-headers='{
    "If-Modified-Since": {{ steam.last_updated | int }},
    "If-None-Match": "{{ steam.etag }}"
  }'
>
  <h2><a href="https://steamcommunity.com/id/risdeveau">Steam</a></h2>

  {{ steam.caches.recent.status }}
  {{ steam.caches.owned.status }}
  {% if steam.caches.recent.data.games %}
    <h3>Recently played:</h3>
    {% for g in steam.caches.recent.data.games.values() %}
      <div href="https://store.steampowered.com/app/{{ g.appid }}" class="block">
        <picture>
          <source media="(max-width: 45rem)" srcset="{{ g.v_cover }}">
          <img src="{{ g.h_cover }}">
        </picture>

        <div>
          <strong>{{ g.name }}</strong>
          <p>Played last 2 weeks: {{ tmsmp(g.playtime_2weeks*60) }}

          <div>
            <p
              x-data='{ playtime: { L: "{{ tmsmp(g.playtime_linux_forever*60) }}", W: "{{ tmsmp(g.playtime_windows_forever*60) }}", T: "{{ tmsmp(g.playtime_forever*60) }}" }}'
              x-text="`Total played: ${playtime[total_mode]}`"
            >
            </p>

            <div>
              <button @click="total_mode = 'L'" :class="total_mode == 'L' && 't-green'">L</button>
              <button @click="total_mode = 'W'" :class="total_mode == 'W' && 't-green'">W</button>
              <button @click="total_mode = 'T'" :class="total_mode == 'T' && 't-green'">T</button>
            </div>

          </div>

          {% if steam.caches.owned.data.games %}
            {% if steam.caches.owned.data.games[g.appid] %}
              <p
                x-data="steam_rtime({{ steam.caches.owned.data.games[g.appid].rtime_last_played }})"
                x-text="`Last played: ${timeString}`"
                :class="textColorClass"
              ></p>
            {% else %}
              <p class="t-red">Last played: Unknown</p>
            {% endif %}
          {% endif %}
        </div>
      </div>
    {% endfor %}
    <p
      x-data="rtime({{steam.caches.recent.last_updated}})"
      x-text="`Last updated: ${timeString}`"
    ></p>
  {% endif %}

  {% if steam.caches.owned.data.games %}
    <h3>Top played games:</h3>
    {% set owned_games = steam.caches.owned.data.games.values() | sort(attribute="playtime_forever", reverse=true) %}
    {% for g in owned_games[:5] %}
      <div
        @click='current == {{ g.appid }} ? current = null : current = {{ g.appid }}'
        href="https://store.steampowered.com/app/{{ g.appid }}"
        class="block"
      >
        <picture>
          <source media="(max-width: 45rem)" srcset="{{ g.v_cover }}">
          <img src="{{ g.h_cover }}">
        </picture>

        <div>
          <strong>{{ g.name }}</strong>
          <p>
            Total played:
            {{ tmsmp(g.playtime_linux_forever*60) }} (<abbr title="On Linux">L</abbr>) +
            {{ tmsmp(g.playtime_windows_forever*60) }} (<abbr title="On Windows">W</abbr>) =
            {{ tmsmp(g.playtime_forever*60) }} (<abbr title="Total">T</abbr>)
          </p>
          {% if g.rtime_last_played != 0 %}
            <p
              x-data="steam_rtime({{ g.rtime_last_played }})"
              x-text="`Last played: ${timeString}`"
              :class="textColorClass"
            ></p>
          {% endif %}
        </div>
      </div>
      <div
        class="block popup"
        x-show="current == {{ g.appid }}"
        x-transition:enter-start="off"
        x-transition:leave-end="off"
      >
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
        <p>Some info</p>
      </div>
    {% endfor %}
    <p
      x-data="rtime({{steam.caches.owned.last_updated}})"
      x-text="`Last updated: ${timeString}`"
    ></p>
  {% endif %}

</div>

{% if request.headers.get('hx-request') != "true" %}
  </div>
{% endif %}