{% extends 'includes/layout.swig' %}

{% macro PostTags(post) %}
<div>
{% for k in Object.keys(post.tags.data) %}
  <a href="{{ url_for(post.tags.data[k].path)}}"><div class="chip">
    {{post.tags.data[k].name}}
  </div></a>
  {% endfor %}
</div>
{% endmacro %}

{% macro PostList(posts) %}
    <ul class="collection">
    {% for post in posts %}
        <li class="collection-item hoverable no-padding">
            <div class="card z-depth-0 card-small-margin">
              {% if post.photos && post.photos.length > 0 %}
                <div class="card-image">
                  <img class="responsive-img" src="{{ post.photos[0] }}" />
                  <span class="card-title">{{ post.title }}</span>
                </div>
                {% if (post.tags.length > 0) || post.excerpt != "" %}
                <div class="card-content">
                  {{ PostTags(post) }}
                  {% if post.excerpt != "" %}
                    <p class="entry">{{ post.excerpt }}</p>
                  {% endif %}
                </div>
                {% endif %}
                <div class="card-action">
                  <a href="{{ url_for(post.path) }}">Go to "{{post.title}}"</a>
                </div>
              {% else %}
                <div class="card-content">
                <a href="{% if post.link %}{{ post.link }}{% else %}{{ url_for(post.path) }}{% endif %}" {%if post.link%}target="_blank"{%endif%}><span class="card-title">{% if (post.title != '' && post.title !== null && post.title !== undefined) %}{{ post.title }}{% else %}{{ post.path }}{% endif %}</span></a>
                <p class="entry">{{ post.excerpt }}</p>
                {{ PostTags(post) }}
                </div>
              {% endif %}
            </div>
        </li>
    {% endfor %}
    </ul>
{% endmacro %}

{% macro MeCard(name, email, description) %}
  <div class="card">
    <div class="row" style="margin-bottom: 0" >
      {% if email %}
        <div class="col" style="padding: 12px; padding-left: 20px;">
          <img class="circle responsive-img" src="{{ gravatar(email) }}" async  />
        </div>
      {% else %}
        <div class="col" style="padding: 12px; padding-left: 20px;">
          <img class="circle responsive-img" src="{{ gravatar('example@foo.bar') }}" />
        </div>
      {% endif %}
      <div class="col" style="padding-top: 12px; padding-left: 12px">
        {% if name %}
          <div class="row" style="margin-bottom: 0"><h6>{{ name }}</h6></div>
        {% endif %}
          <div class="row" style="margin-bottom: 0"><p>{%if description %}{{description}}{% else %}Nothing to say.{%endif%}</p></div>
      </div>
    </div>
  </div>
{% endmacro %}

{% macro TagPanel(tags) %}
  <div class="card-panel" style="padding-top: 12px; padding-bottom: 12px;">
    <span class="chip transparent">Tags</span>
    {% for tag in tags %}
      <a href="{{ url_for(tag.path)}}"><div class="chip">
        {{tag.name}}
      </div></a>
    {% endfor %}
  </div>
{% endmacro %}

{% import "includes/paginator.swig" as P%}

{% block body %}
<div class="row">
  <div class="col m8 l9">
    {% if page.current == 1 %}
      {{ MeCard(config.author, config.email, config.description) }}
    {% endif %}
    {% if page.posts.length > 0 %}
      {{ PostList(page.posts.toArray()) }}
    {% else %}
      <span>No Post Here...</span>
    {% endif %}
    <div class="center">
      {{ P.Paginiation() }}
    </div>
  </div>
  <div class="col m4 l3 hide-on-small-only">
    {{ TagPanel(site.tags) }}
  </div>
</div>
{% endblock %}

{% block add_head %}
<link rel="stylesheet" href="/css/index.css">
{% endblock %}