<h2 class="my-3">{{ page_title }}</h2>
<article>
  <a href="{{ "admin/post/new/edit" | relative_link }}" class="btn btn-primary btn-sm mb-3">Write a New Post</a>
  <form method="post" class="container" hx-target="body">
    <input type="hidden" name="{{ csrf.form_field_name }}" value="{{ csrf.request_token }}">
    {%- assign post_count = model.posts | size -%}
    {%- assign date_col   = "col-xs-12 col-md-3 col-lg-2" -%}
    {%- assign title_col  = "col-xs-12 col-md-7 col-lg-6 col-xl-5 col-xxl-4" -%}
    {%- assign author_col = "col-xs-12 col-md-2 col-lg-1" -%}
    {%- assign tag_col    = "col-lg-3 col-xl-4 col-xxl-5 d-none d-lg-inline-block" -%}
    <div class="row mwl-table-heading">
      <div class="{{ date_col }}">
        <span class="d-md-none">Post</span><span class="d-none d-md-inline">Date</span>
      </div>
      <div class="{{ title_col }} d-none d-md-inline-block">Title</div>
      <div class="{{ author_col }} d-none d-md-inline-block">Author</div>
      <div class="{{ tag_col }}">Tags</div>
    </div>
    {%- if post_count > 0 %}
      {% for post in model.posts -%}
        <div class="row mwl-table-detail">
          <div class="{{ date_col }} no-wrap">
            <small class="d-md-none">
              {%- if post.published_on -%}
                Published {{ post.published_on | date: "MMMM d, yyyy" }}
              {%- else -%}
                Not Published
              {%- endif -%}
              {%- if post.published_on != post.updated_on -%}
                <em class="text-muted"> (Updated {{ post.updated_on | date: "MMMM d, yyyy" }})</em>
              {%- endif %}
            </small>
            <span class="d-none d-md-inline">
              {%- if post.published_on -%}
                {{ post.published_on | date: "MMMM d, yyyy" }}
              {%- else -%}
                Not Published
              {%- endif -%}
              {%- if post.published_on != post.updated_on %}<br>
                <small class="text-muted"><em>{{ post.updated_on | date: "MMMM d, yyyy" }}</em></small>
              {%- endif %}
            </span>
          </div>
          <div class="{{ title_col }}">
            {%- assign media = post.metadata | value: "episode_media_file" -%}
            {%- unless media == "-- episode_media_file not found --" -%}
              <span class="badge bg-success float-end text-uppercase">Episode</span>
            {%- endunless -%}
            {{ post.title }}<br>
            <small>
              <a href="{{ post | relative_link }}" target="_blank">View Post</a>
              <span class="text-muted"> &bull; </span>
              <a href="{{ post | edit_post_link }}">Edit</a>
              <span class="text-muted"> &bull; </span>
              {%- capture post_del %}admin/post/{{ post.id }}/delete{% endcapture -%}
              {%- capture post_del_link %}{{ post_del | relative_link }}{% endcapture -%}
              <a href="{{ post_del_link }}" hx-post="{{ post_del_link }}" class="text-danger"
                 hx-confirm="Are you sure you want to delete the page &ldquo;{{ post.title | strip_html | escape }}&rdquo;? This action cannot be undone.">
                Delete
              </a>
            </small>
          </div>
          <div class="{{ author_col }}">
            {%- assign tag_count = post.tags | size -%}
            <small class="d-md-none">
              Authored by {{ model.authors | value: post.author_id }} |
              {% if tag_count == 0 -%}
                No
              {%- else -%}
                {{ tag_count }}
              {%- endif %} Tag{% unless tag_count == 1 %}s{% endunless %}
            </small>
            <span class="d-none d-md-inline">{{ model.authors | value: post.author_id }}</span>
          </div>
          <div class="{{ tag_col }}">
            <span class="no-wrap">{{ post.tags | join: "</span>, <span class='no-wrap'>" }}</span>
          </div>
        </div>
      {%- endfor %}
    {% else %}
      <div class="row">
        <div class="col text-muted fst-italic text-center">This web log has no posts</div>
      </div>
    {% endif %}
  </form>
  {% if model.newer_link or model.older_link %}
    <div class="d-flex justify-content-evenly">
      <div>
        {% if model.newer_link %}
          <p><a class="btn btn-default" href="{{ model.newer_link.value }}">&laquo; Newer Posts</a></p>
        {% endif %}
      </div>
      <div class="text-right">
        {% if model.older_link %}
          <p><a class="btn btn-default" href="{{ model.older_link.value }}">Older Posts &raquo;</a></p>
        {% endif %}
      </div>
    </div>
  {% endif %}
</article>
