{% extends "_default/base.html" %}
{% block content %}

<!-- Default page template for news posts and basic informative markdown files -->
<main>

  <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-16 lg:w-4/6">

    <div class="pt-8">
      <section class="post-header container mx-auto px-0 mb-4 border-b">
        <h1 class="text-5xl font-medium leading-none mt-0">
          {{ page.title }}
        </h1>
        <div class="text-2xl pt-4 pb-10 text-gray-700">{{ page.description }}</div>
      </section>
      <section class="post-author-list mb-10 mx-0">
        <div class="flex items-center">
          <div class="flex justify-between items-center">
            <ul class="list-none flex author-list my-10 mr-2 px-0">
            {% if page.taxonomies.people %}
                {% for person in page.taxonomies.people %}
                    {% set author_path = 'people/' ~ person ~ '/index.md' %}
                    {% set people = get_section(path="people/_index.md") %}           
                    {% set pages_str = people.pages | json_encode() | as_str %}
                    {% if pages_str is containing(person) %}
                        {% set author = get_page(path=author_path) %}
                        {% 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">
                <a href="{{author.permalink}}" tooltip="{{author.title}}">
                  <img src="{{author_img}}" alt="{{ author.title }}" class="
                    w-10
                    h-10
                    rounded-full
                    bg-gray-200
                    border-2 border-white
                  " />
                </a>
              </li>
              {% endif %}
              {% endfor %}
              {% endif %}
            </ul>
          </div>

          <div class="pl-3 flex flex-col text-xs leading-none uppercase">
            <p>
            {% if page.taxonomies.people %}
            {% for person in page.taxonomies.people %}
            {% set author_path = 'people/' ~ person ~ '/index.md' %}
            {% set people = get_section(path="people/_index.md") %}           
            {% set pages_str = people.pages | json_encode() | as_str %}
            {% if pages_str is containing(person) %}
                {% set author = get_page(path=author_path) %}
                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
              <span>
                <a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-800">{{ author.title }}</a>
              </span>
              {% endif %}
                {% endfor %}
            {% endif %}
            </p>
            <p class="text-gray-700">
              <time datetime="{{page.date}}">
                {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
              </time>
              {# &nbsp;&middot;&nbsp; {{ page.news.timeToRead }} min read #}
            </p>
          </div>
          <div class="my-2 ml-auto sharethis-inline-share-buttons"></div>
        </div>
      </section>
    </div>
    <section class="post-image mx-auto w-full">
    {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
      <img src="{{img_url}}" />
    </section>

    <div class="py-12">
      <section class="
          post-content
          container
          mx-auto
          relative
          font-serif
          text-gray-700
        ">
        <div class="post-content-text text-xl">{{ page.content | safe }}</div>
      </section>

      <section class="post-tags container mx-auto relative py-10">
        {% for tag in page.taxonomies.tags %}
        {% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
        <a href="{{fullpath}}" class="
            text-xs
            bg-transparent
            hover:text-blue-700
            py-2
            px-4
            mr-2
            border
            hover:border-blue-500
            border-gray-600
            text-gray-700
            rounded-full
          ">{{ tag }}</a>
        {% endfor %}
      </section>
    </div>
  </div>
</main>
{% endblock content %}