{% extends 'base.html' %}
{% block 'body' %}

<h1>{{ org.name }}</h1>

<h2>Channels</h2>
<table class="table table-hover table-responseive">
    <thead>
        <tr>
            <th>Name</th>
            <th>Level</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for channel in channels %}
            <tr>
                <td>{{ channel.name }}</td>
                <td>{{ channel.role }}</td>
                <td>
                    <div class="btn-group">
                        <a href="{% url 'delete_channel' org.id channel.gid %}" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        {% if channel.role == "trusted" %}
                            <a href="{% url 'demote_channel' org.id channel.gid %}" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></a>
                        {% else %}
                            <a href="#" class="btn btn-primary disabled"><span class="glyphicon glyphicon-arrow-down"></span></a>
                        {% endif %}
                    </div>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<div class="btn-group">
    <a href="{% url 'add_trusted_channel' org.id %}" class="btn btn-primary">Add new trusted channel</a>
    <a href="{{ scheme }}://{{ hostname }}{% url 'add_channel_to_organization' org.id %}" class="btn btn-primary">Add new follower channel</a>
    <button id="sharebutton" type="button" class="btn btn-primary">Copy share link</button>
    <a href="{% url 'qr_code' org.id %}" class="btn btn-primary">View QR Code</a>
</div>

<h2>Trusted Users</h2>

<table class="table table-hover table-responseive">
    <thead>
        <tr>
            <th>Name</th>
            <th>Sent messages</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
            <tr>
                <td>{{ user.name }}</td>
                <td>{{ user.number_messages }}</td>
                <td>
                    <div class="btn-group">
                        <a href="{% url 'remove_user' org.id user.uid %}" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></a>
                    </div>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<div class="btn-group">
    <a href="{% url 'add_trusted_user' org.id %}" class="btn btn-primary">Add new trusted user</a>
</div>

<script>
    const sharelink = document.getElementById("sharelink");
    const sharebutton = document.getElementById("sharebutton");
    document.getElementById("sharebutton").addEventListener("click", () => {
        navigator.clipboard.writeText(sharelink.href);
    });
</script>

{% endblock %}