{% if post.date %}
{% if post.taxonomies.people %}
    {% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
    {% set author = get_page(path=author_path) %}
{% endif %}

<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
  <div class="flex-1 border-b">
    <a href="{{ post.permalink }}" class="block">
    {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
      <div class="flex-shrink-0">
        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
      </div>
      <div class="flex-1 bg-white p-6 flex flex-col justify-between">

        <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic">
          {{ post.title }}
        </h3>
        {% if post.description %}
        <p class="mt-3 text-sm font-normal text-gray-500 text-left">
          {{ post.description }}
        </p>
        {% endif %}
    </a>
  </div>
  <div class="w-full post-card-meta py-3">
    <div class="avatars">
      <div class="flex items-center">
        <div class="flex justify-between items-center">
          <ul class="list-none flex author-list mr-2">
            {% if author %}
                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
                <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
                    class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
            {% endif %}
          </ul>
        </div>
        <div class="flex flex-col text-left leading-none uppercase">
            {% if author %}
          <p class="text-gray-700 text-xs">{{ author.title }}</p>
          {% endif %}
          <p class="text-gray-700 text-xs">
          <time datetime="{{post.date}}">
            {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
            </time>
        </p>
    </div>
</div>
</div>
</div>
</div>
</div>

<style>
    .border-b {
        border-bottom-width: 1px !important;
    }
</style>
{% endif %}