{% extends "shared/base.html" %}

{% block title %}
  <title>Lofi Links</title>
{% endblock %}

{% block content %}
  {% with msg=msg %}
    {% include "components/alerts.html" %}
  {% endwith %}
  <div class="row">
    <div class="col-md-8">
      <h1>Media Lofi</h1>
        <p>Hier steht der wesentliche Inhalt der Seite.</p>
    </div>
    <div class="col-md-4">
      <aside class="bg-light p-3">
        <h3>Seitenbereich</h3>
        <p>Optionale Sidebar oder Zusatzinformationen.</p>
      </aside>
    </div>
  </div>

  <div class="row">
    <form class="form-inline" action="/media/lofis">
      <input type="text" placeholder="Search" name="query">
        <label>
          <input type="checkbox" name="review" {% if review %}checked{% endif %}>Review
        </label>
        <label>
          <input type="checkbox" name="should_download" {% if download %}checked{% endif %}>Download
        </label>
        <button type="submit">Search</button>
        <div class="pill-nav"><a href="/media/lofis/add">Add Lofi</a></div>
    </form>
  </div>

  <div class="row">
    <table class="table table-hover">
      <thead>
        <tr>
            <th scope="col">Title</th>
            <th scope="col">Weblink</th>
            <th scope="col">Review</th>
            <th colspan="2">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for medialofi in medialofis %}
        <tr>
          <th scope="row"><a href="/media/lofi/{{medialofi.id}}">{{medialofi.title}}</a></th>
          <td><a href="{{medialofi.url}}">{{medialofi.url}}</a></td>
          <td>{% with check=medialofi.review %}{% include "components/check.html" %}{% endwith %}</td>
          <td>{% with check=medialofi.should_download %}{% include "components/check.html" %}{% endwith %}</td>
          <td><a href="/media/lofi/{{medialofi.id}}/edit" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a></td>
          <td><a href="/media/lofi/{{medialofi.id}}/delete" class="btn btn-outline-danger btn-sm active" role="button" aria-pressed="true">Delete</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}