{% extends "authorized.html" %}
{% block title %}Gift Exchange{% endblock %}
{% block center %}
<div class="row">
    <div class="btn-toolbar" role="toolbar">
        <a role="button" class="btn btn-primary" href="/giftexchange/{{ giftexchange.id }}">Save</a>
    </div>
</div>
<div class="row">
    Exchange Name: <input id="name" name="name" type="text" value="{{ giftexchange.name }}" required>
</div>
<div class="row">
    <div class="col">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th data-sortable="true" data-field="name"scope="col">Name</th>
                </tr>
            </thead>
            <tbody>
                {% for participant in non_participants %}
                <tr>
                    <td>{{ participant.name }}</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="col">
        <div class="btn-group-vertical" role="group">
            <button type="button" class="btn btn-primary">Add</button>
            <button type="button" class="btn btn-primary">Remove</button>
        </div>
    </div>
    <div class="col">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th data-sortable="true" data-field="name" scope="col">Name</th>
                </tr>
            </thead>
            <tbody>
                {% for participant in participants %}
                <tr>
                    <td>{{ participant.participant_id }}</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock center %}