{% extends "base.html" %}

{% block title %}Apps{% endblock %}

{% block content %}
<div class="datasette-apps-page-header">
  <h1>Apps</h1>
  {% if can_create %}
    <p><a class="datasette-app-button" href="{{ urls.path('/-/apps/create') }}">Create app</a></p>
  {% endif %}
</div>

<form class="datasette-apps-search" method="get" action="{{ urls.path('/-/apps') }}">
  <input type="search" name="q" placeholder="Search apps" value="{{ q or '' }}">
  <button type="submit">Search</button>
</form>

<ul class="datasette-app-list">
{% for app in apps %}
  <li class="datasette-app-list-item{% if app.pinned %} datasette-app-list-item-pinned{% endif %}">
    <div class="datasette-app-list-main">
      <h2>
        <a href="{{ urls.path(app.href) }}">{{ app.name }}</a>
        {% if app.is_private %}
          <span class="datasette-app-private-badge">Private</span>
        {% endif %}
      </h2>
      {% if app.description %}
        <p>{{ app.description }}</p>
      {% endif %}
    </div>
    {% if can_pin %}
      <form class="datasette-app-pin-form" method="post" action="{{ urls.path('/-/apps/' ~ app.id ~ '/' ~ ('unpin' if app.pinned else 'pin')) }}">
        <input type="hidden" name="next" value="{{ current_path }}">
        <button
          class="datasette-app-button datasette-app-pin-button"
          type="submit"
          aria-pressed="{% if app.pinned %}true{% else %}false{% endif %}"
          aria-label="{% if app.pinned %}Unpin{% else %}Pin{% endif %} {{ app.name }}"
        >{% if app.pinned %}Unpin{% else %}Pin{% endif %}</button>
      </form>
    {% endif %}
  </li>
{% endfor %}
</ul>

{% if next_url %}
  <p><a rel="next" href="{{ urls.path(next_url) }}">Next</a></p>
{% endif %}
{% endblock %}