{% load home_tags wagtailimages_tags %}
{% idle_recommendations as idle_articles %}
{% if idle_articles %}
<div class="idle-modal" data-idle-modal data-idle-delay="120000" hidden>
  <div class="idle-modal__backdrop" data-idle-close></div>
  <section class="idle-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="idle-modal-title">
    <button class="idle-modal__close" type="button" aria-label="關閉" data-idle-close>×</button>
    <h2 class="idle-modal__title" id="idle-modal-title">你已閒置超過兩分鐘囉!</h2>
    <svg class="idle-modal__cup" width="88" height="98" viewBox="489 134 89 98" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
      <path d="M558.438 232H492.217C491.526 231.236 491.212 230.55 491.961 229.689L557.967 229.5C559.506 229.517 559.601 231.279 558.433 232H558.438Z" fill="white"/>
      <path d="M559.777 168.074C565.973 165.137 572.104 166.218 575.121 172.733C578.074 179.107 577.291 187.35 574.548 193.66C570.626 202.673 562.079 208.625 552.675 210.87L550.353 224.777L549.742 225.697L499.539 225.633L499.13 224.608L489 163.05C489.164 162.378 489.724 162.109 490.391 162.135L559.302 162.14C561.877 161.992 559.399 167.686 559.777 168.074ZM557.671 164.63H491.835L501.873 223.399L547.891 223.365L557.671 164.63ZM553.081 208.076C562.897 205.419 571.055 198.582 573.582 188.483C575.3 181.61 574.512 167.249 564.17 169.309C563.104 169.522 559.586 170.843 559.184 171.787L553.081 208.076Z" fill="white"/>
      <path d="M522.507 159.223C521.867 158.55 522.417 155.94 522.747 155.063C524.125 151.394 527.807 150.624 527.221 145.8C526.884 143.015 524.143 141.479 522.998 139.114C522.392 137.863 521.325 134.003 523.509 134C525.035 134 524.713 135.915 525.04 137.073C526.14 140.957 530.233 141.607 529.927 147.321C529.676 152.028 525.843 153.232 525.002 156.556C524.828 157.239 524.854 158.435 524.657 158.891C524.34 159.617 523.051 159.798 522.507 159.225V159.223Z" fill="white"/>
      <path d="M503.372 159.22C502.605 158.448 503.216 156.571 503.696 155.728C504.87 153.672 508.598 152.649 508.058 150.034C507.708 148.328 504.21 147.014 503.361 144.779C502.939 143.672 502.633 141.586 504.364 141.65C505.916 141.706 505.391 143.342 506.189 144.439C507.736 146.562 510.901 147.07 510.786 150.747C510.674 154.357 507.677 154.687 506.187 156.689C505.588 157.492 505.742 158.668 505.241 159.187C504.739 159.706 503.86 159.711 503.369 159.22H503.372Z" fill="white"/>
      <path d="M542.309 141.699C544.148 141.328 543.705 143.294 544.378 144.335C545.758 146.47 549.077 146.853 549.075 150.563C549.069 154.795 544.835 155.102 544.02 157.582C543.764 158.356 543.981 159.571 542.649 159.571C541.317 159.571 541.289 158.257 541.422 157.28C541.882 153.895 546.551 153.245 546.392 150.369C546.285 148.382 542.562 147.094 541.691 144.918C541.302 143.946 540.969 141.97 542.309 141.699Z" fill="white"/>
    </svg>
    <div class="idle-modal__section-head">
      <span class="idle-modal__section-label">專屬推薦</span>
      <span class="idle-modal__rule" aria-hidden="true"></span>
    </div>
    <div class="idle-modal__grid">
      {% for article in idle_articles %}
        <article class="idle-modal__card">
          <a class="idle-modal__card-link" href="{{ article.url }}">
            <span class="idle-modal__thumb">
              {% if article.cover_image %}
                {% image article.cover_image max-194x133 as cover %}
                <img src="{{ cover.url }}" alt="{{ article.title }}" width="194" height="133">
              {% else %}
                {% random_default_cover as default_cover %}
                <img src="{{ default_cover }}" alt="{{ article.title }}" width="194" height="133">
              {% endif %}
            </span>
            <span class="idle-modal__article-title">{{ article.title }}</span>
          </a>
        </article>
      {% endfor %}
    </div>
  </section>
</div>
{% endif %}