{% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}

<div class="ons-grid ons-grid-flex ons-grid-flex--between">
    <div class="ons-grid__col">
        <h1 class="ons-u-fs-l u-mb-2xs" name="page-manage-account-title">{{ name }}</h1>
    </div>
</div>

<div class="ons-grid ons-grid-flex ons-grid-flex--between">
    <div class="ons-grid__col">
        <h2 class="ons-u-fs-m u-mb-2xs" name="page-manage-account-subtitle">Select user permissions</h2>
    </div>
</div>

<form id="user-permissions" action="" method="post">
    <input type="hidden" name="csrf_token" value="" />
    <section class="ons-u-mt-s">
        <table id="tbl-users" class="ons-table">
            <thead class="ons-table__head">
                <tr class="ons-table__row">
                    <th scope="col" class="ons-table__header">
                        <span>Survey Data Collection area</span>
                    </th>
                    <th scope="col" class="ons-table__header">
                        <span>View</span>
                    </th>
                    <th scope="col" class="ons-table__header">
                        <span>Edit</span>
                    </th>
                    <th scope="col" class="ons-table__header">
                        <span>Delete</span>
                    </th>
                </tr>
            </thead>
            <tbody class="ons-table__body">
                <tr class="ons-table__row">
                    <td class="ons-table__cell">Surveys</td>
                    <td class="ons-table__cell">
                        {{
                            onsCheckbox({
                                "id": "surveys-view-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "View surveys"
                                },
                                "value": "y",
                                "checked": true,
                                "disabled": true
                            })
                        }}
                    </td>
                    <td class="ons-table__cell" colspan="2">
                        {{
                            onsCheckbox({
                                "id": "surveys-edit-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "Edit surveys"
                                },
                                "value": "n"
                            })
                        }}
                    </td>
                </tr>
                <tr class="ons-table__row">
                    <td class="ons-table__cell">Reporting units</td>
                    <td class="ons-table__cell">
                        {{
                            onsCheckbox({
                                "id": "reporting-units-view-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "View reporting units"
                                },
                                "value": "y",
                                "checked": true,
                                "disabled": true
                            })
                        }}
                    </td>
                    <td class="ons-table__cell" colspan="2">
                        {{
                            onsCheckbox({
                                "id": "reporting-units-edit-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "Edit reporting units"
                                },
                                "value": "n"
                            })
                        }}
                    </td>
                </tr>
                <tr class="ons-table__row">
                    <td class="ons-table__cell">Respondents</td>
                    <td class="ons-table__cell">
                        {{
                            onsCheckbox({
                                "id": "respondents-view-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "View respondents"
                                },
                                "value": "y",
                                "checked": true,
                                "disabled": true
                            })
                        }}
                    </td>
                    <td class="ons-table__cell">
                        {{
                            onsCheckbox({
                                "id": "respondents-edit-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "Edit respondents"
                                },
                                "value": "y",
                                "checked": true
                            })
                        }}
                    </td>
                    <td class="ons-table__cell">
                        {{
                            onsCheckbox({
                                "id": "respondents-delete-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "Delete respondents"
                                },
                                "value": "n"
                            })
                        }}
                    </td>
                </tr>
                <tr class="ons-table__row">
                    <td class="ons-table__cell">Messages</td>
                    <td class="ons-table__cell">
                        {{
                            onsCheckbox({
                                "id": "messages-view-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "View messages"
                                },
                                "value": "y",
                                "checked": true,
                                "disabled": true
                            })
                        }}
                    </td>
                    <td class="ons-table__cell" colspan="2">
                        {{
                            onsCheckbox({
                                "id": "messages-edit-example-checkbox-with-hidden-label",
                                "hideLabel": true,
                                "label": {
                                    "text": "Edit messages"
                                },
                                "value": "y",
                                "checked": true
                            })
                        }}
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
</form>