{% extends "base.html" %}
{% load widget_tweaks %}

{% block content %}
    <div class="container">
        <h1 class="title">Settings</h1>
        <form method="post" action="{% url "settings" %}" >
            {% csrf_token %}

            <h2 class="subtitle">General Options</h2>
            <div class="field">
                <label class="label" for="theme">{{ form.theme.label }}</label>
                <div class="control has-icons-left">
                    <div class="select">
                        {% render_field form.theme class+="select" %}
                        <span class="icon is-small is-left">
                            <span class="fa fa-paint-brush"></span>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label" for="timezone">{{ form.timezone.label }}</label>
                <div class="control has-icons-left">
                    <div class="select">
                        {% render_field form.timezone class+="select" %}
                        <span class="icon is-small is-left">
                            <span class="fa fa-clock-o"></span>
                    </div>
                </div>
            </div>

            <h2 class="subtitle">Timeline Options</h2>
            <div class="field">
                <label class="label checkbox">
                    {% render_field form.filter_replies %}
                    {{ form.filter_replies.label  }}
                </label>
            </div>
            <div class="field">
                <label class="label checkbox"">
                    {% render_field form.filter_boosts %}
                    {{ form.filter_boosts.label  }}
                </label>
            </div>

            <h2 class="subtitle">JavaScript Options</h2>
            <div class="field">
                <label class="label checkbox" for="no_javascript">
                    {% render_field form.no_javascript class+="checkbox" %}
                    {{ form.no_javascript.label }}
                </label>
                <p class="notification is-info preferences-help">
                    {{ form.no_javascript.help_text }}
                </p>
            </div>

            <div class="field">
                <label class="label checkbox" for="notifications">
                    {% render_field form.notifications class+="checkbox" %}
                    {{ form.notifications.label }}
                </label>
                <p class="notification is-info preferences-help">
                    {{ form.notifications.help_text }}
                </p>
            </div>

            <div class="field">
                <label class="label checkbox" for="click_to_load">
                    {% render_field form.click_to_load class+="checkbox" %}
                    {{ form.click_to_load.label }}
                </label>
                <p class="notification is-info preferences-help">
                        {{ form.click_to_load.help_text }}
                    </p>
            </div>

            <div class="field">
                <label class="label checkbox" for="click_to_load">
                    {% render_field form.lightbox class+="checkbox" %}
                    {{ form.lightbox.label }}
                </label>
                <p class="notification is-info preferences-help">
                    {{ form.lightbox.help_text }}
                </p>
            </div>

            <div class="field">
                <input type="submit" name="submit"
                       value="Save" class="button is-primary" >
            </div>
        </form>
    </div>
{% endblock %}