{# vim: ft=htmldjango
#}

{% macro ibutton(href='', left_icon='', right_icon='', text='', color='red', title='', disabled=False) -%}
{% set element = 'a' if href else 'button' %}
<{{ element }} class="{{ color }} button {% if disabled %}disabled{% endif %}" title="{{title}}"
        {% if href %}href="{{ href }}"{% endif %}
        {% if disabled %}disabled{% endif %} >
  {% if left_icon %}
  <img src="{{ url_for('static', filename='icons/' + left_icon + '.svg')}}" alt="{{ text }} icon" />
  {% endif %}

  {% if text %}
  <span>{{ text }}</span>
  {% endif %}

  {% if right_icon %}
  <img src="{{ url_for('static', filename='icons/' + right_icon + '.svg')}}" alt="{{ text }} icon" />
  {% endif %}
</{{ element }}>
{%- endmacro %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      {% block title %}
      {% endblock %}
      - Pytaku
    </title>

    <link rel="stylesheet" href="{{ url_for('static', filename='minireset.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}" />

    {% block head %}
    {% endblock %}
  </head>

  <body>
    <nav>
      <a class="logo" href="/"><img src="{{ url_for('static', filename='pytaku.svg')}}" alt="home" /></a>
      <form class="search" action="{{ url_for('search_view') }}" method="GET">
        <input type="text" placeholder="search manga" name="q" value="{{ query }}" /><button class="red button">
          <img src="{{ url_for('static', filename='icons/search.svg')}}" alt="search">
        </button>
      </form>
      <span class="links">
        {% if session.get('user') %}
        <span>Hi there <strong>{{ session.user['username'] }}</strong>!</span>
        <form method="POST" action="{{ url_for('logout_view') }}">
          {{ ibutton(left_icon='log-out', text='Logout', color='gray') }}
        </form>
        {% else %}
        <a href="/auth">
          <img src="{{ url_for('static', filename='icons/log-in.svg')}}" alt="login/register" />
          <span>Login/Register</span>
        </a>
        {% endif %}
      </span>
      </ul>
    </nav>

    <div class="content">
    {% block content %}
    {% endblock %}
    </div>
  </body>

</html>
