{{!
    This file is part of Moodle - https://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template local_kopere_dashboard/permissions-users

    Example context (json):
    {
        "existinguserselector": "<select multiple=\"multiple\" size=\"12\" class=\"form-control\"><option value=\"12\">Finance Manager (#12)</option><option value=\"77\">Prof. Daniel Moreau (#77)</option></select>",
        "potentialuserselector": "<select multiple=\"multiple\" size=\"12\" class=\"form-control\"><option value=\"501\">Alice Johnson (#501)</option><option value=\"502\">Bruno Silva (#502)</option></select>"
    }
}}

<div class="kopere_dashboard-card">
    <div class="muted">{{#str}}permissions_users_desc, local_kopere_dashboard{{/str}}</div>

    <div class="row" style="margin-top: 16px;">
        <div class="col-md-5">
            <h5>{{#str}}permissions_current_users, local_kopere_dashboard{{/str}}</h5>
            {{{existinguserselector}}}
        </div>

        <div class="col-md-2"
             style="display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:stretch;">
            <button class="btn btn-secondary" type="submit" name="add" value="1">
                {{#str}}permissions_add, local_kopere_dashboard{{/str}}
            </button>
            <button class="btn btn-secondary" type="submit" name="remove" value="1">
                {{#str}}permissions_remove, local_kopere_dashboard{{/str}}
            </button>
        </div>

        <div class="col-md-5">
            <h5>{{#str}}permissions_potential_users, local_kopere_dashboard{{/str}}</h5>
            {{{potentialuserselector}}}
        </div>
    </div>
</div>
