{% load i18n %}

<table class="lfs-manage-table">
    <tr>
        <td width="50%">
            <h2>{% trans 'Properties' %}</h2>
            <form id="add-property-form"
                  action="{% url lfs_assign_properties property_group.id %}"
                  method="post">
                <div id="properties-left" style="padding-bottom:10px">
                    <table class="lfs-manage-table">
                        <tr>
                            <th class="checkbox">
                                <input type="checkbox"
                                       class="select-all"
                                       value="properties" />
                            </th>
                            <th>{% trans 'Name' %}</th>
                        </tr>
                        {% if properties %}
                            {% for property in properties %}
                                <tr class="{% cycle 'even' 'odd' %}">
                                    <td>
                                        <input type="checkbox"
                                               class="select-properties"
                                               name="property-id"
                                               value="{{ property.id }}" />
                                    </td>
                                    <td>
                                        {{ property.name }}
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td></td>
                                <td>
                                    {% trans 'All properties are assigned' %}
                                </td>
                            </tr>
                        {% endif %}
                    </table>
                </div>
                <div class="buttons">
                    <input type="submit"
                           class="ajax-save-button button"
                           value="{% trans 'Assign properties' %}" />
                </div>
            </form>
        </td>
        <td width="50%">
            <h2>{% trans 'Assigned properties' %}</h2>
            <form id="property-group-update-form"
                  action="{% url lfs_update_properties property_group.id %}"
                  method="post">
                <div id="properties-right" style="padding-bottom:10px">
                    <table class="lfs-manage-table">
                        <tr>
                            <th class="checkbox">
                                <input type="checkbox"
                                       class="select-all"
                                       value="assigned-products" />
                            </th>
                            <th width="100px">
                                {% trans 'Position' %}
                            </th>
                            <th>
                                {% trans 'Name' %}
                            </th>
                        </tr>
                        {% if gps %}
                            {% for gp in gps %}
                                <tr>
                                    <td>
                                        <input type="checkbox"
                                               class="select-assigned-products"
                                               name="property-id"
                                               value="{{ gp.property.id }}" />
                                    </td>
                                    <td>
                                        <input class="number"
                                               type="text"
                                               size="3"
                                               name="position-{{ gp.property.id }}"
                                               value="{{ gp.position }}" />
                                    </td>
                                    <td>
                                        {{ gp.property.name }}
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="3">
                                    {% trans 'No properties assigned' %}
                                </td>
                            </tr>
                        {% endif %}
                    </table>
                </div>
                <div class="buttons">
                    <input type="submit"
                           class="ajax-save-button button"
                           name="remove"
                           value="{% trans 'Remove properties' %}" />
                    <input type="submit"
                           class="ajax-save-button button"
                           name="update"
                           value="{% trans 'Update properties' %}" />
                    </div>
            </form>

        </td>
    </tr>
</table>
<script>
    align_buttons("#properties");
</script>