@css(/static/node_modules/tom-select/dist/css/tom-select.min.css)
@js(/static/node_modules/tom-select/dist/js/tom-select.base.min.js)
@js(js/communities/community_members.js)

@extends(templates/layout_normal)

@section(main)
    <h2>
        <a href="<?= Container::$routeCollection->getRoute('community')->generateLink(['communityId' => $community->getId()]) ?>"><?= $community->getName() ?></a> »
        <a href="<?= Container::$routeCollection->getRoute('community.settings')->generateLink(['communityId' => $community->getId()]) ?>">Settings</a> »
        Edit members
    </h2>
    <div class="box compactBox">
        <table class="fullWidth">
            <thead>
                <tr>
                    <th style="width: 50%;">User</th>
                    <th style="width: 25%; text-align: center;">Owner</th>
                    <th style="width: 25%;"></th>
                </tr>
            </thead>
            <?php foreach ($members as $member): ?>
                <?php $editable = $member->getUserId() !== Container::$request->user()->getUniqueId(); ?>
                <tr>
                    <td>
                        <form id="editMember_<?= $member->getId() ?>" action="<?= Container::$routeCollection->getRoute('community.members.edit-action')->generateLink(['communityId' => $community->getId(), 'community_member_id' => $member->getId()]) ?>" method="post" data-reload-on-success="true" data-observe-inputs="owner"></form>
                        <form id="deleteMember_<?= $member->getId() ?>" action="<?= Container::$routeCollection->getRoute('community.members.delete-action')->generateLink(['communityId' => $community->getId(), 'community_member_id' => $member->getId()]) ?>" method="post" data-reload-on-success="true"></form>
                        <?= $member->getUser()->getDisplayName() ?>
                    </td>
                    <td style="text-align: center;">
                        <input type="checkbox" form="editMember_<?= $member->getId() ?>" name="owner" <?= $member->getOwner() ? 'checked' : '' ?> <?= !$editable ? 'disabled' : '' ?> />
                    </td>
                    <td style="text-align: right;">
                        <?php if ($editable): ?>
                            <button type="submit" form="editMember_<?= $member->getId() ?>" name="submit_button" class="small marginRight" disabled>Save</button><!--
                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this member?" class="small red">Delete</button>
                        <?php endif; ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            <tr>
                <td>
                    <form id="newMember" action="<?= Container::$routeCollection->getRoute('community.members.new-action')->generateLink(['communityId' => $community->getId()]) ?>" method="post" data-reload-on-success="true" data-observe-inputs="user_id"></form>
                    <select type="text" form="newMember" name="user_id">
                </td>
                <td style="text-align: center;">
                    <input type="checkbox" form="newMember" name="owner" />
                </td>
                <td style="text-align: right;">
                    <button type="submit" form="newMember" name="submit_button" class="small" disabled>Add</button>
                </td>
            </tr>
        </table>
        <p class="formError justify marginTop"></p>
    </div>
@endsection

@section(pageScript)
<script>
    var searchUserUrl = '<?= Container::$routeCollection->getRoute('searchUser')->generateLink(['q' => 'QUERY']) ?>';
</script>
@endsection