{% extends "index.html" %}
{% block clipboard_active %}active{% endblock %}
{% block clipboard_selected %}selected{% endblock %}
{% block content %}
<p>
<h2>Clipboard
    <sup>
        <a href="#" title="What's this?" data-toggle="popover"
        data-trigger="focus" data-content="{{help.clipboard_main}}">
        <span data-feather="help-circle"></span></a>
    </sup>
</h2>
    <div class="col">
    <form action="clipboard/add" method="post" id="clipform" class='row'>
        <div class="input-group mb-3">
          <textarea id="clipboard-area" rows="4" cols="80" name="content"
              form="clipform" class="form-control"
              aria-describedby="basic-addon2"></textarea>
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">+</button>
          </div>
        </div>
    </form>
    {% if nonpersistent %}
    <div class="alert alert-danger" role="alert">
      Warning: Because you are missing a dependency (flask_sqlalchemy), the
      clipboard is not persistent!
    </div>
    {% endif %}
{% if clipboard|length == 0 %}
        <p>Clipboard is empty</p>
{% else %}
    <div class="row mb-3">
        <div class="col-sm text-right">
            <form action="/clipboard/del-all" method="post" class="col-sm">
                <button type="submit"
                        class="btn btn-danger btn-sm">
                    Delete all
                </button>
                <a href="/clipboard/export" class="btn btn-secondary btn-sm flush-right">
                    <span class="align-baseline" data-feather="download"></span> Export
                </a>
            </form>
        </div>
    </div>
    {% for c in clipboard %}
        <div class="card row" id="card-{{c.id}}">
          <div class="card-body">
            <h5 class="card-title">{{c.time}}
            <div class="card-id">{{c.id}}</div>
              <sup>
                <a href="#" class="card-link edit-clipboard" data-id="{{c.id}}">
                    <span data-feather="edit">edit</span>
                </a>
              </sup>
              <sup>
                <a href="#" class="card-link delete-clipboard" data-id="{{c.id}}">
                    <span data-feather="trash-2">delete</span>
                </a>
              </sup>
            </h5>
            <h6 class="card-subtitle mb-2 text-muted">{{c.IP}}</h6>
            <pre style="white-space: pre-wrap; word-break: break-all;">{{ c.content }}</pre>
            <div id="buttons-{{c.id}}" class="pt-2 col-sm text-right collapse">
                <a href="#" class="btn btn-primary btn-sm flush-right
                edit-ok" data-id="{{c.id}}">
                    OK
                </a>
                <a href="#" class="btn btn-secondary btn-sm flush-right
                edit-cancel" data-id="{{c.id}}">
                    Cancel
                </a>
            </div>
          </div>
        </div>
    {% endfor %}
{% endif %}
    </div>
</p>
{% endblock %}