{% comment %}
Una plantilla que representa un artículo, podría ser un layout pero lo
ponemos en includes para poder reutilizarlo en la portada.

Ya tiene todos los metadatos para schema.org y microformats.org
{% endcomment %}

{% assign page = include.page %}

<article class="h-entry mt-5" itemscope itemtype="http://schema.org/Article">
  <header class="row no-gutters align-items-center mb-3">
    <div class="p-name col-12 col-lg-9">
      <h1 class="p-name" itemprop="name headline">
        {{ page.title | default: '' | escape }}
      </h1>

      {%- if page.description -%}
        <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
      {%- endif -%}
    </div>

    <div class="col-6">
      <p class="m-0">
        {%- for author in page.author -%}
          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span class="p-author h-card" itemprop="name">
              {{ author | default: '' | escape }}
            </span>{% unless forloop.last %},{% endunless %}
          </span>
        {%- endfor -%}
      </p>
    </div>

    <div class="col-6 col-lg-3 text-right">
      <time
        class="dt-published"
        datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
        {{ page.date | date: date_format }}
      </time>
    </div>
  </header>

  {% comment %}
    En responsive, el contenido pierde el espacio que lo separa de la
    imagen a la derecha y las dos columnas invierten su orden, la imagen
    se coloca encima.
  {% endcomment %}
  <div class="row no-gutters">
    <div class="col-12 col-md-6 e-content pt-3 pr-md-3 order-1 order-md-0" itemprop="articleBody">
      {{ page.content }}

      {% comment %}
        TODO: Estaría bueno tener una forma de extraer las imágenes
        y videos y mandarlas a la barra del costado no?
      {% endcomment %}
    </div>

    <div class="col-12 col-md-6 col-lg-3 order-0 order-md-1">
      {%- if page.image.path -%}
          <picture>
            {% comment %}
              Producir versiones de las imágenes para distintos tamaños
              de pantalla, de forma que siempre se baje la resolución
              justa.

              TODO: Vincular a la imagen completa para que librenauta
              pueda collagear :P
            {% endcomment %}
            {% for size in site.images.sizes %}
              <source srcset="{{ page.image.path | thumbnail: size }}" media="(max-width: {{ size }}px)" />
            {% endfor %}

            <img
              class="img-fluid"
              src="{{ page.image.path | thumbnail: 1140 }}"
              alt="{{ page.image.description | default: page.title }}" />
          </picture>
      {%- endif -%}

      {%
        include_cached
          share_box.html
          url=page.url
          title=page.title
          description=page.description
          categories=page.categories
      %}
    </div>
  </div>

  <footer>
    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
      {{ site.url }}/{{ page.url }}
    </a>

    {%- if page.uuid -%}
      <span hidden itemprop="identifier">{{ page.uuid }}</span>
    {%- endif -%}

    {%- if page.license.url -%}
      <p itemprop="license" itemtype="http://schema.org/CreativeWork">
        <a rel="license" itemprop="url" href="{{ page.license.url }}">
          <span itemprop="articleBody">
            {{ page.license.description }}
          </span>
        </a>
      </p>
    {%- endif -%}

    {%- if page.tags %}
      <span itemprop="keywords" hidden>{{ page.tags | join: ', ' }}</span>
      {%- for tag in page.tags -%}
        <span hidden class="h-category">{{ tag }}</span>
      {%- endfor -%}
    {%- endif -%}
  </footer>
</article>