{% load i18n %}
<script type="text/html" id="hstore-row-template-{{ field_name }}" class="hstore-row-template-inline">
    <div class="l-2c-fluid l-d-4 grp-row grp-cells">
        <div class="c-1 grp-cell">
            <input type="text" placeholder="{% trans 'key' %}" value="<%= key %>" style="min-width:150px;">
        </div>
        <div class="c-2 grp-cell">
            <input style="min-width:300px;float:left"
                   value="<%= _.escape(value) %>"
                   type="text"
                   placeholder="{% trans 'value' %}">

            <ul class="grp-tools" style="float:left;position:static;margin:0 0 0 15px">
                <li><a href="#" class="grp-icon grp-remove-handler remove-row" title="{% trans 'remove row' %}"></a></li>
            </ul>
        </div>
    </div>
</script>

<script type="text/html" id="hstore-ui-template-{{ field_name }}"{% if '__prefix__' in field_name %} class="hstore-ui-template-inline"{% endif %}>
    <div class="grp-module hstore" id="hstore-{{ field_name }}">
        <h2><%= label %></h2>

        <ul class="grp-tools">
            <li><a href="#" class="grp-text hstore-toggle-txtarea">{% trans 'toggle textarea' %}</a></li>
            <li class="hs-add-row"><a href="#" class="grp-icon grp-add-handler" title="{% trans "Add row" %}"></a></li>
        </ul>

        <% if(help && help != '') { %>
            <div class="grp-row"><p class="grp-description"><%= help %></p></div>
        <% } %>

        <div class="l-2c-fluid l-d-4 grp-row grp-cells hstore-textarea" style="display:none">
            <div class="c-1 grp-cell">
                <label for="<%= id %>">{% trans 'Raw textarea' %}</label>
            </div>
            <div class="c-2 grp-cell">
                <textarea class="vLargeTextField" cols="40" id="<%= id %>" name="<%= name %>" rows="10"><%= value %></textarea>
            </div>
        </div>

        <div class="hstore-rows">
            <% if(errors){ %>
                <div class="l-2c-fluid l-d-4 grp-row grp-cells">
                    <div class="grp-cell">
                        <ul class="errorlist">
                            <%= errors %>
                        </ul>
                    </div>
                </div>
            <% } %>
            <% for(key in data){ %>
                <%= _.template($('.hstore-row-template-inline').eq(0).html(), { 'key': key, 'value': data[key] }) %>
            <% } %>
        </div>

        <div class="grp-row hs-add-row">
            <a href="#" class="grp-button grp-add-link">+ {% trans "Add row" %}</a>
        </div>
    </div>
</script>

<script>django.jQuery(function() { initDjangoHStoreWidget('{{ field_name }}') });</script>
