@css(node_modules/choices.js/public/assets/styles/choices.min.css)
@js(node_modules/choices.js/public/assets/scripts/choices.js)
@js(js/communities/community_members.js)

@extends(templates/layout_normal)

@section(main)
    <h2><?= $community->getName() ?> - Edit members</h2>
    <div class="box">
        <table class="fullWidth">
            <thead>
                <tr>
                    <th style="width: 50%;"></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')->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')->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" class="small marginRight" disabled>Save</button><!--
                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" class="small red">Delete</button>
                        <?php endif; ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            <tr>
                <td>
                    <form id="newMember" action="<?= Container::$routeCollection->getRoute('community-members-new')->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" 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