{% extends "base.html" %}

{% block title %}Overlays | left4me{% endblock %}

{% block content %}
<section class="panel">
  <div class="page-heading">
    <h1>Overlays</h1>
    <button type="button" data-inline-modal-open="create-overlay-modal">+ Create</button>
  </div>

  <table class="table">
    <thead><tr><th>Name</th><th>Type</th><th>Scope</th><th>Path</th></tr></thead>
    <tbody>
      {% for overlay in overlays %}
      <tr>
        <td><a href="/overlays/{{ overlay.id }}">{{ overlay.name }}</a></td>
        <td>{{ overlay.type }}</td>
        <td class="muted">{% if overlay.user_id %}private{% else %}system{% endif %}</td>
        <td class="muted">{{ overlay.path }}</td>
      </tr>
      {% else %}
      <tr><td colspan="4" class="muted">No overlays yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<dialog id="create-overlay-modal" class="modal" aria-labelledby="create-overlay-title">
  <form method="post" action="/overlays" class="stack">
    <div class="modal-header">
      <h2 id="create-overlay-title">Create overlay</h2>
      <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
    </div>
    <div class="modal-body">
      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">

      <div class="field">
        <label class="field-label" for="create-overlay-name">Name</label>
        <input id="create-overlay-name" name="name" required>
      </div>

      <div class="field">
        <span class="field-label">Type</span>
        <div class="radio-list">
          <label class="radio-row">
            <input type="radio" name="type" value="workshop" checked>
            <span class="radio-row-text">
              <strong>Workshop</strong>
              <span>Downloads from Steam</span>
            </span>
          </label>
          <label class="radio-row">
            <input type="radio" name="type" value="script">
            <span class="radio-row-text">
              <strong>Script</strong>
              <span>Runs sandboxed bash</span>
            </span>
          </label>
          <label class="radio-row">
            <input type="radio" name="type" value="files">
            <span class="radio-row-text">
              <strong>Files</strong>
              <span>Upload / edit text files online</span>
            </span>
          </label>
        </div>
      </div>

      {% if g.user and g.user.admin %}
      <label class="switch-row">
        <input type="checkbox" name="system_wide" value="1">
        <span class="switch-row-text">
          <strong>System-wide</strong>
          <span>Visible to all users</span>
        </span>
      </label>
      {% endif %}
    </div>
    <div class="modal-footer">
      <button type="button" class="button-secondary" data-inline-modal-close>Cancel</button>
      <button type="submit">Create</button>
    </div>
  </form>
</dialog>
{% endblock %}