{% extends "bootstrap/base.html" %}
{% block title %}Buku Server{% endblock %}
{% block html_attribs %} lang="en"{% endblock %}

{% block styles %}
{{super()}}
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
{% endblock %}

{% block navbar %}
{{super()}}
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Buku Server</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="{{url_for('index')}}">Home</a></li>
        <li><a href="{{url_for('bookmarks-html')}}">Bookmarks</a></li>
        <li><a href="{{url_for('get_tags-html')}}">Tags</a></li>
        <li><a href="{{url_for('statistic')}}">Statistic</a></li>
      </ul>
      <form class="navbar-form navbar-right" action="{{url_for('search_bookmarks-html')}}" method="GET">
        <div class="form-group">
          <input type="text" class="form-control" id="inputKeywords" placeholder="Search bookmark" name="keywords-0">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form>
    </div><!--/.nav-collapse -->
  </div>
</nav>
{% endblock %}

{% block content %}
  <div class="container">{{show_flash_message()}}</div>
{%- endblock %}

{% macro show_flash_message() %}
{%- with messages = get_flashed_messages(with_categories=True) %}
{%- if messages %}
  {% for category, message in messages %}
    <div class="alert alert-{{category}}">{{message}} </div>
  {% endfor %}
{%- endif %}
{%- endwith %}
{% endmacro %}

{% macro show_bookmarks(bookmarks) %}
<table class="table" style="table-layout: fixed; width: 100%">
  <caption>Bookmark table.</caption>
  <thead> <tr> <th>Entry</th> </tr> </thead>
  <tbody>
    {% for item in bookmarks %}
    <tr> <td style="overflow-wrap: break-word;">
      <h3>
        {% if item.url|netloc %}
          <img src='http://www.google.com/s2/favicons?domain={{item.url|netloc}}'/>
        {% endif %}
        <a href="{{item.url}}">{{item.title}}</a>
        <a href="{{url_for('bookmark_api-html', id=item.id)}}">
          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
        </a>
      </h3>
      {% if url_render_mode == 'netloc' %} ({{item.url|netloc}}) {% endif %}
      {% if not url_render_mode or url_render_mode == 'full' %}
      <p><a href="{{item.url}}">{{item.url}}</a></p>
      {% endif %}
      <p>{{item.description}}</p>
      <p>
        {% for tag in item.tags %}
        <a class="btn btn-default" href="{{url_for('bookmarks-html', tag=tag)}}" role="button">{{tag}}</a>
        {% endfor %}
      </p>
    </td> <tr>
    {% else %}
    <tr> <td>No entry Found</td> </tr>
    {% endfor %}
  </tbody>
</table>
{% endmacro %}

{% macro show_bookmarks_search_form(checkbox_class=None) %}
<form class="form-horizontal" action="{{url_for('search_bookmarks-html')}}" method="GET">
  <div class="form-group">
    {{search_bookmarks_form.keywords.label}}
    {% for entry in search_bookmarks_form.keywords %}
      {{ entry() }}
    {% endfor %}
  </div>
  <div class="{{checkbox_class}}">
    <div class="form-group"> {{search_bookmarks_form.all_keywords()}} {{search_bookmarks_form.all_keywords.label}} </div>
    <div class="form-group"> {{search_bookmarks_form.deep()}} {{search_bookmarks_form.deep.label}} </div>
    <div class="form-group"> {{search_bookmarks_form.regex()}} {{search_bookmarks_form.regex.label}} </div>
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>
{% endmacro %}