<div>
  {{ include('/admin/module/setting.twig', { moduleInfo: moduleInfo }) }}
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
    {% for entry in items %}
      <article>
        <a href="{{ entry.url }}" class="block w-full hover:opacity-70">
          {% if entry.mainImage.path %}
            <img
              src="{{ entry.mainImage.path|resizeImg(686, 386) }}"
              width="343"
              height="193"
              alt="{{ entry.mainImage.alt }}"
              loading="lazy"
              decoding="async"
              class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
            />
          {% else %}
            <img
              src="/images/default/noimage.gif"
              width="343"
              height="193"
              alt=""
              loading="lazy"
              decoding="async"
              class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
            />
          {% endif %}
          <h2 class="mt-3 text-gray-900 text-lg font-bold line-clamp-2">{{ entry.title }}</h2>
          <p class="mt-2 text-sm line-clamp-2">
            {{ entry.summary }}
          </p>
          <div class="flex items-center mt-2 text-xs">
            <p class="text-gray-500">
              <time datetime="{{ entry.datetime|date('Y-m-d') }}">{{ entry.datetime|date('Y年m月d日') }}</time>
            </p>
            {% if entry.isNew %}
              <p class="ml-2 px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs">
                NEW
              </p>
            {% endif %}
          </div>
          {% if entry.category.items %}
            <p class="mt-2 text-gray-500 font-bold text-xs">
              {{ entry.category.items[0].name }}
            </p>
          {% endif %}
          {% if entry.tags %}
            <ul class="flex flex-wrap gap-3 mt-2 text-sm text-gray-500">
              {% for tag in entry.tags %}
                <li><a href="{{ tag.url }}" class="hover:opacity-70">#{{ tag.name }}</a></li>
              {% endfor %}
            </ul>
          {% endif %}
        </a>
      </article>
    {% endfor %}
  </div>
</div>
