{% extends 'users/base.html' %}
{% load helpers %}

{% block title %}User Preferences{% endblock %}

{% block content %}
<form method="post" action="" id="preferences-update">
    {% csrf_token %}
    <div class="field-group mb-3">
        <h5 class="text-center">Color Mode</h5>
        <p class="lead text-muted">Set preferred UI color mode</p>
        {% with color_mode=preferences|get_key:'ui.colormode'%}
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ui.colormode" id="color-mode-preference-dark" value="dark"{% if color_mode == 'dark'%} checked{% endif %}>
            <label class="form-check-label" for="color-mode-preference-dark">Dark</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ui.colormode" id="color-mode-preference-light" value="light"{% if color_mode == 'light'%} checked{% endif %}>
            <label class="form-check-label" for="color-mode-preference-light">Light</label>
        </div>
        {% endwith %}
    </div>
    <div class="row">
        <div class="col">
            <button type="submit" class="btn btn-primary" name="_update">
                Save
            </button>
        </div>
    </div>
{% if preferences %}
<div class="field-group mb-3">
    <h5 class="text-center">Other Preferences</h5>
    <table class="table table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" class="toggle form-check-input" title="Toggle All"></th>
                <th>Preference</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            {% for key, value in preferences.items %}
                <tr>
                    <td class="min-width"><input class="form-check-input" type="checkbox" name="pk" value="{{ key }}"></td>
                    <td><samp>{{ key }}</samp></td>
                    <td><samp>{{ value }}</samp></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <button type="submit" class="btn btn-danger" name="_delete">
        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Clear Selected
    </button>
</div>
{% else %}
    <h3 class="text-muted text-center">No Preferences Found</h3>
{% endif %}
</form>
{% endblock %}