{% extends '@manage/users/master.twig' %}

{% block content %}
    <form action="?v=role{{ edit_role is defined ? '&r=' ~ edit_role.role_id : '' }}" method="post">
        <div class="container">
            <h1 class="container__title">
                {% if edit_role is defined %}
                    Editing <span style="color:{{ edit_role.role_colour|colour_get_css }}">{{ edit_role.role_name }}</span> ({{ edit_role.role_id }})
                {% else %}
                    Creating a new Role
                {% endif %}
            </h1>

            <label class="form__label">
                <div class="form__label__text">Role Name</div>
                <div class="form__label__input">
                    <input class="input input--text" type="text" value="{{ edit_role is defined ? edit_role.role_name : '' }}" name="role[name]" maxlength="255">
                </div>
            </label>

            <label class="form__label">
                <div class="form__label__text">Hide Rank</div>
                <div class="form__label__input">
                    <input class="input" type="checkbox" name="role[secret]"{% if edit_role is defined and edit_role.role_secret %} checked{% endif %}>
                </div>
            </label>

            <label class="form__label">
                <div class="form__label__text">Hierarchy</div>
                <div class="form__label__input">
                    <input class="input input--number" type="number" value="{{ edit_role is defined ? edit_role.role_hierarchy : '1' }}" min="1" max="100" name="role[hierarchy]">
                </div>
            </label>

            <h2 class="container__subtitle">Colour</h2>

            <label class="form__label">
                <div class="form__label__text">Inherit Colour</div>
                <div class="form__label__input">
                    <input class="input" type="checkbox" name="role[colour][inherit]"{% if edit_role is defined and edit_role.role_colour|colour_get_inherit %} checked{% endif %}>
                </div>
            </label>

            <label class="form__label">
                <div class="form__label__text">Red</div>
                <div class="form__label__input">
                    <input class="input input--number" type="number" value="{{ edit_role is defined ? edit_role.role_colour|colour_get_red : '0' }}" min="0" max="255" name="role[colour][red]">
                </div>
            </label>

            <label class="form__label">
                <div class="form__label__text">Green</div>
                <div class="form__label__input">
                    <input class="input input--number" type="number" value="{{ edit_role is defined ? edit_role.role_colour|colour_get_green : '0' }}" min="0" max="255" name="role[colour][green]">
                </div>
            </label>

            <label class="form__label">
                <div class="form__label__text">Blue</div>
                <div class="form__label__input">
                    <input class="input input--number" type="number" value="{{ edit_role is defined ? edit_role.role_colour|colour_get_blue : '0' }}" min="0" max="255" name="role[colour][blue]">
                </div>
            </label>

            <h2 class="container__subtitle">Additional</h2>

            <label class="form__label">
                <div class="form__label__text">Description</div>
                <div class="form__label__input">
                    <textarea class="input input--textarea" name="role[description]" maxlength="1000">{{ edit_role is defined ? edit_role.role_description : '' }}</textarea>
                </div>
            </label>

            <div>
                <button class="button" name="csrf" value="{{ csrf_token() }}">{{ edit_role is defined ? 'Update role' : 'Create role' }}</button>
            </div>
        </div>
    </form>
{% endblock %}