{% extends '/_layouts/two-column.twig' %}

{% set tagCloud =
  module(
    'V2_Tag_Cloud',
    null,
    { bid: null, cid: null, eid: EID, field: null, start: '1000-01-01 00:00:00', end: '9999-12-31 23:59:59' }
  )
%}

{% set entryTagRelational =
  module(
    'V2_Entry_TagRelational',
    null,
    {
      bid: null,
      cid: null,
      eid: EID,
      limit: null,
      keyword: null,
      field: null,
      start: '1000-01-01 00:00:00',
      end: '9999-12-31 23:59:59'
    }
  )
%}

{% set relationalItems = entryTagRelational.items|slice(0, 2) %}
{% set offsetRelationalItems = entryTagRelational.items|slice(2) %}

{% block headJs %}
  {{ parent() }}
  {% if touch('Touch_EditInplace') %}
    <script>
      ACMS.Ready(function() { ACMS.Config.blockEditorConfig.editorProps.editorProps.attributes.class = 'prose'; });
    </script>
  {% endif %}
{% endblock %}

{% block main %}
  <article>
    {{ include('/include/entry/body.twig', { sns_share: true }) }}

    {% if entryTagRelational.items is not empty %}
      <aside class="mt-16 md:mt-20 grid gap-y-8">
        <div>
          {{ include('/admin/module/setting.twig', { moduleInfo: tagCloud.moduleInfo }) }}
          <h2 class="text-lg font-bold">関連記事</h2>
          <p class="mt-3">
            <span>この記事のハッシュタグ</span>
            <span class="flex my-0.5 md:my-0 md:inline md:ml-3">
              {% for tag in tagCloud.items %}
                <span class="mr-3"><a href="{{ tag.url }}">#{{ tag.name }}</a></span>
              {% endfor %}
            </span>
            <span>から関連する記事を表示しています。</span>
          </p>
        </div>

        <div>
          {{ include('/admin/module/setting.twig', { moduleInfo: entryTagRelational.moduleInfo }) }}

          <div class="grid gap-y-8">
            {{ include('/include/entry/tag-relational-card.twig', { items: relationalItems }) }}

            {% if offsetRelationalItems is not empty %}
              {{ include('/include/entry/tag-relational-tiny.twig', { items: offsetRelationalItems }) }}
            {% endif %}
          </div>
        </div>
      </aside>
    {% endif %}
  </article>
{% endblock %}
