{% extends "base.html" %}

{% block head %}
  <style>
    .blog-post {
      display: inline-block;
      width: calc(90vw - 20px);
      max-width: 600px;
      border: 1px solid rgb(var(--accent));
      border-radius: 10px;
      margin-top: 18px;
      padding: 20px;
      text-align: left;
    }
  </style>
  <script src="{{ config.services.common.url.pub }}/static/js/base.js?v={{ config.version_str }}"></script>
{% endblock %}

{% block body %}
  <h1>{{ username }}'s Blog</h1>
  <p>
    {% if self_username %}
      <a href="/">Your Dashboard</a>
    {% else %}
      Nog logged in.
      {% if config.new_users %}<a href="{{ config.services.auth.url.pub }}/signup/?to=blog">Sign up</a>{% else %}<a href="{{ config.services.auth.url.pub }}/login/?to=blog">Log in</a>{% endif %}?
    {% endif %}
  </p>

  {% for post in posts %}
    <hr>
    <a class="fake-link blog-post" href="/blog/{{ username }}/{{ post.url }}/">
      <h2 class="no-margin">{{ post.title }}</h2>
      <small data-timestamp="{{ post.timestamp }}"></small>
    </a>
  {% empty %}
    <hr>
    <i>No posts yet</i>
  {% endfor %}
{% endblock %}