{% extends 'page-base.twig' %}
{% block content %}
    <table class="mt-4 min-w-full divide-y divide-gray-200">
        <thead>
        <tr>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                User
            </th>
            {% for capability in ['Publish', 'Disconnect', 'Trash/Restore', 'Permanent Delete'] %}
                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                    {{ capability }}
                </th>
            {% endfor %}
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
        {% for username, blogCapabilities in blogUserCapabilities %}
            <tr>
                <td class="px-6 py-4 w-1 whitespace-no-wrap">
                    {{ username }}
                </td>
                {% for capability in ['postsync_can_publish', 'postsync_can_disconnect', 'postsync_can_trashrestore', 'postsync_can_permdelete'] %}
                    <td class="px-6 py-4 w-4 whitespace-no-wrap">
                        <select name="{{ username }}_{{ capability }}" class="select" multiple>
                            {% for blog_id, capabilities in blogCapabilities %}
                                <option value="{{ blog_id }}"
                                        {% if capabilities[capability] %}selected{% endif %}>
                                    {{ blog_details[blog_id].name }} ({{ blog_details[blog_id].id }})
                                </option>
                            {% endfor %}
                        </select>
                    </td>
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <input type="submit" value="Save Changes"
           class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
    <div id="success-notification"
         class="hidden bg-green-100 border border-green-400 text-green-700 mt-4 px-4 py-3 max-w-sm rounded relative"
         role="alert">
        <strong class="font-bold">Success!</strong>
        <span class="block sm:inline">The settings have been saved successfully.</span>
    </div>
{% endblock %}
