<div class="row form-area" style="padding-right: 0.75em">
    {# Label #}
    <label class="col-md-3" style="text-align: right; padding-right:2.3em">{{ schema.title | get_translated_text }}</label>
    {# View #}
    <div class="view-switch col-md-9">
        {% if data is not none and "hazards" in data %}
            {% if data["hazards"] %}
                <div class="ghs-hazards">
                {% set hazard_titles = {1: 'Explosive', 2: 'Flammable', 3: 'Oxidizing', 4: 'Compressed Gas', 5: 'Corrosive', 6: 'Toxic', 7: 'Harmful', 8: 'Health Hazard', 9: 'Environmental Hazard'} %}
                {% for hazard_index in data["hazards"] %}
                    <img src="{{ url_for('static', filename='img/ghs0{}.png'.format(hazard_index)) }}" alt="GHS0{{ hazard_index }}" title="{{ hazard_titles[hazard_index] }}"/>
                {% endfor %}
                    <a class="edit-helper"><i class="fa fa-pencil-square-o"></i></a>
                </div>
            {% else %}
                &mdash;
                <a class="edit-helper"><i class="fa fa-pencil-square-o"></i></a>
            {% endif %}
        {% else %}
            {{ _('Unknown') }}
        {% endif %}
        <div class="alert-upload-failed">
            {{ _('Your input is not valid. Please check.') }}
        </div>
    </div>
    {# Form #}
    <div class="form-switch col-md-9">
        <input type="hidden" name="{{ id_prefix }}_hidden" value="field exists" />
        <div class="radio">
            <label>
                <input type="radio" name="{{ id_prefix }}_hasnohazards" onchange="setHasNoHazards(this)" value="true" {% if (data is not none and "hazards" in data and not data["hazards"] and id_prefix+'_hidden' not in form_data) or (id_prefix+'_hidden' in form_data and form_data.get(id_prefix+'_hasnohazards', '') == 'true') %}checked="checked"{% endif %}>
                {{ _('This object does not pose any of these hazards.')}}
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="{{ id_prefix }}_hasnohazards" value="false" {% if (data is not none and "hazards" in data and data["hazards"] and id_prefix+'_hidden' not in form_data) or (id_prefix+'_hidden' in form_data and form_data.get(id_prefix+'_hasnohazards', '') == 'false') %}checked="checked"{% endif %}>
                {{ _('This object poses the following hazards:') }}
            </label>
        </div>
        <div class="ghs-hazards-selection">
            {% set hazard_titles = {1: 'Explosive', 2: 'Flammable', 3: 'Oxidizing', 4: 'Compressed Gas', 5: 'Corrosive', 6: 'Toxic', 7: 'Harmful', 8: 'Health Hazard', 9: 'Environmental Hazard'} %}
            {% for hazard_index in hazard_titles.keys() | sort %}
                <label>
                    <input type="checkbox" name="{{ id_prefix }}_ghs0{{ hazard_index }}" onchange="setHasHazard(this)" {% if (data is not none and "hazards" in data and hazard_index in data["hazards"]) or (id_prefix+('_ghs0%d' | format(hazard_index)) in form_data) %}checked="checked"{% endif %}><span>{{ hazard_titles[hazard_index] }}</span><img src="{{ url_for('static', filename='img/ghs0%d.png' | format(hazard_index)) }}" alt="GHS0{{ hazard_index }}" title="{{ hazard_titles[hazard_index] }}"/>
                </label>
            {% endfor %}
        </div>
        {% if id_prefix+'_hidden' in object_errors %}<span class="help-block"><strong>{{ _('Error:') }}</strong> {{ object_errors[id_prefix+'_hidden'] }}</span>{% endif %}
        {% if 'note' in schema %}<span class="help-block"><strong>{{ _('Note:') }}</strong> {{ schema['note'] | get_translated_text }}</span>{% endif %}
        <script>
            function setHasNoHazards(checkbox) {
                if (checkbox.checked) {
                    var hazards_selection = $(checkbox).closest(".radio").parent().find(".ghs-hazards-selection");
                    $(hazards_selection).find('input').each(function () {
                        this.checked = false;
                    });
                }
            }
            function setHasHazard(checkbox) {
                var hazards_selection = $(checkbox).closest(".ghs-hazards-selection");
                var has_hazards = $(hazards_selection).find('input').filter(function() { return this.checked}).length > 0;
                var hasnohazards_true = $(hazards_selection).parent().find('input[name$="_hasnohazards"][value=true]')[0];
                hasnohazards_true.checked = !has_hazards;
                var hasnohazards_false = $(hazards_selection).parent().find('input[name$="_hasnohazards"][value=false]')[0];
                hasnohazards_false.checked = has_hazards;
            }
        </script>
    </div>
</div>