<!DOCTYPE html>
<html lang="en" dir="ltr" id="main_html">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
        <title id="title"></title>
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Material Symbols - Outlined Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
        <!-- Material Symbols - Rounded Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
        <!-- Material Symbols - Sharp Set -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>

        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
    </head>
    <body>
        <div class="uk-container uk-section">
            <div uk-grid>
                <div class="uk-width-1-1" >
                    <a href="/admin" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
                    <a onclick="toggleDarkMode()" class="uk-button uk-button-small uk-align-right"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                </div>
                <div class="uk-width-1-1">
                    <h3 class="uk-text-center">Role Form</h3>
                </div>
                <div class="uk-width-1-1">
                    <p>Roles exist to harness a users/devices access to a sites specific apps and inputs. You use roles to better define a groups permissions
                        within the app in order to control who has access to what. Specific User/Device permissions will overwrite any of their roles, permissions.</p>
                </div>
                <div class="uk-width-1-1">
                    <hr class="uk-divider-icon">
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="role_name">Role Name</label>
                        <div class="uk-form-controls">
                            <input id="role_name" class="uk-input" type="text">
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <label class="uk-form-label" for="role_description">Role Description</label>
                    <div class="uk-margin">
                        <textarea id="role_description" class="uk-textarea" rows="5" aria-label="Textarea"></textarea>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="site_id">Select</label>
                        <div class="uk-form-controls">
                            <select id="site_id" class="uk-select">
                                {% for site in sites %}
                                    <option value="{{site['id']}}">{{site['site_name']}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-1">
                    <hr class="uk-divider-icon">
                </div>
                <div class="uk-width-1-1">
                    <button id="SubmitButton" class="uk-button uk-button-primary uk-align-right">Save</button>
                </div>
            </div>
        </div>
    </body>
    {% assets "js_all" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}
    <script>
        let role = {{role|tojson}}
        const session = {{session|tojson}}
        const path = window.location.pathname
        console.log(role)

        document.addEventListener('DOMContentLoaded', async function() {
            let mode = "edit"
            if(path == "/admin/role/new"){
                mode = "new"
            }
            await replenishForm(role, mode)
        })

        var mode = false
        async function toggleDarkMode() {
            let darkMode = document.getElementById("dark-mode");    
            darkMode.disabled = !darkMode.disabled;
            mode = !mode;
            if(mode){
                document.getElementById('modeToggle').innerHTML = "light_mode"
                document.getElementById('main_html').classList.add('uk-light')
            } else {
                document.getElementById('modeToggle').innerHTML = "dark_mode"
                document.getElementById('main_html').classList.remove('uk-light')
            }
        }

        if(session.user.flags.darkmode){
            toggleDarkMode()
        }

        async function replenishForm(role, mode){
            document.getElementById('role_name').value = role.role_name
            document.getElementById('role_description').value = role.role_description
            document.getElementById('site_id').value = role.site_id

            if(mode=="new"){
                document.getElementById('site_id').classList.remove('uk-disabled')
                document.getElementById('SubmitButton').innerHTML = "Add Role"
                document.getElementById('SubmitButton').onclick = async function(){
                    await postAddRole()
                }
            } else {
                document.getElementById('site_id').classList.add('uk-disabled')
                document.getElementById('SubmitButton').innerHTML = "Update Role"
                document.getElementById('SubmitButton').onclick = async function(){
                    await postEditRole()
                }
            }

            
        }

        async function postAddRole(){
            
            let payload = {
                role_name: document.getElementById('role_name').value,
                role_description: document.getElementById('role_description').value,
                site_id: document.getElementById('site_id').value,
            }

            const response = await fetch(`/admin/role/postAddRole`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    payload: payload
                }),
            });
        }

        async function postEditRole(){
            
            let payload = {
                id: role.id,
                update: {role_name: document.getElementById('role_name').value, role_description: document.getElementById('role_description').value}
            }

            const response = await fetch(`/admin/role/postEditRole`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    payload: payload
                }),
            });
        }

    </script>
</html>