<div>
    Data structure that can be used to build the UI (only use it if it is helpful. Might be easier to just
    hardcode all in the template).
    Make sure to prefix the name of any <code>input</code> created here, so the names don't clash with real fields in
    the form.
    <ul>
        {% for device, options in choices %}
            <li>
                {{ device }}
                <ul>
                    {% for option_value, verbose_name in options %}
                        <li>{{ verbose_name }} (<code>{{ option_value }}</code>)</li>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>
</div>

<div>
Save the resulting selection as a space seperated list of css classes into the textarea with
<code>name={{ name }}</code>. It expects something like:
<pre>
hidden-xs visible-sm-inline-block visible-lg-block
</pre>
In the example "None" was selected for <code>md</code>, so there is no entry for it. I don't do any server side
validation, so please make sure there are no conflicting entries.
</div>
{{ widget_html }}

<div>
Other Template variables:
<pre>
    id: {{ id }} (css id of the textarea)
    name: {{ name }}
    value: {{ value }}
</pre>
</div>
