{% load i18n %}

<div class="aldryn-bootstrap3 aldryn-bootstrap3-responsive js-aldryn-bootstrap3-responsive">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default js-responsive-choice"
            data-cls="visible-xs">
            <span class="fa fa-fw fa-2x fa-mobile"></span><br>
            <span class="js-on">{% trans "Visible" %}</span>
            <span class="js-off">{% trans "Hidden" %}</span>
        </label>
        <label class="btn btn-default js-responsive-choice"
            data-cls="visible-sm">
            <span class="fa fa-fw fa-2x fa-tablet"></span><br>
            <span class="js-on">{% trans "Visible" %}</span>
            <span class="js-off">{% trans "Hidden" %}</span>
        </label>
        <label class="btn btn-default js-responsive-choice"
            data-cls="visible-md">
            <span class="fa fa-fw fa-2x fa-laptop"></span><br>
            <span class="js-on">{% trans "Visible" %}</span>
            <span class="js-off">{% trans "Hidden" %}</span>
        </label>
        <label class="btn btn-default js-responsive-choice"
            data-cls="visible-lg">
            <span class="fa fa-fw fa-2x fa-desktop"></span><br>
            <span class="js-on">{% trans "Visible" %}</span>
            <span class="js-off">{% trans "Hidden" %}</span>
        </label>
        <label class="btn btn-primary dropdown-toggle js-responsive-config"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fa fa-fw fa-2x fa-cog"></span><br>
            <span class="text">{% trans "Default" %}</span> <span class="caret"></span>
        </label>
        <ul class="dropdown-menu js-responsive-config-dropdown">
            <li class="active"><a href="#">{% trans "Default" %}</a></li>
            <li><a href="#-block">{% trans "Block" %}</a></li>
            <li><a href="#-inline">{% trans "Inline" %}</a></li>
            <li><a href="#-inline-block">{% trans "Inline block" %}</a></li>
        </ul>
    </div>

    <div class="textarea-field hidden">
        {{ widget_html }}
    </div>
</div>

{% comment %}
<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>
{% endcomment %}