{% load i18n %}

<div id="imagebrowser"
     style="min-width:800px">
    <h1>{% trans "Local images" %}</h1>

    <div style="padding-bottom:10px">
        <table width="100%">
            <tr>
                <td>
                    <span>{% trans "Your are here" %}:</span>
                    <a class="fb-obj"
                       href="{% url 'lfc_imagebrowser' %}?obj_id=">{% trans "Portal" %}</a>

                    {% for obj in objs %}
                        &gt;
                        <a class="fb-obj"
                           href="{% url 'lfc_imagebrowser' %}?obj_id={{ obj.id }}">{{ obj.title }}</a>
                    {% endfor %}
                </td>
                <td align="right">
                    <a class="fb-obj"
                       href="{% url 'lfc_imagebrowser' %}?obj_id={{ current_id }}">{% trans "Current Object" %}</a>
                </td>
            </tr>
        </table>
    </div>

    <table class="lfs-manage-table" width="100%">
        <tr>
            <td>
                <table>
                    <tr>
                        <th width="300px">
                            {% trans "Children" %}
                        </th>
                    </tr>
                    <tr>
                        <td>
                            {% for child in children %}
                                <div>
                                    {% if child.display %}
                                        <a class="fb-obj"
                                           href="{% url 'lfc_imagebrowser' %}?obj_id={{ child.id }}">{{ child.title }} {{ child.display }}
                                        </a>
                                    {% else %}
                                        <span class="fb-obj">{{ child.title }}
                                        </span>
                                    {% endif %}
                                </div>
                            {% empty %}
                                <div>{% trans "There are no children" %}</div>
                            {% endfor %}
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <th colspan="2" width="300px">
                            {% trans "Images" %}
                        </th>
                    </tr>

                    {% for image in images %}
                        <tr>
                            <td width="10px">
                                <input class="image" name="image" value="{{ image.url }}" type="radio" {% if image.checked %}checked="checked"{% endif %} />
                            </td>
                            <td valign="top">
                                {{ image.title }}
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="2">
                                {% trans "There are no local images yet" %}
                            </td>
                        </tr>
                    {% endfor %}

                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <th>
                            {% trans "Preview" %}
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <div style="min-height:200px" id="image-preview">
                                {% if selected_image %}
                                    <img src="{{ selected_image.image.url_200x200 }}" alt='{% trans "Prview" %}' />
                                {% else %}
                                    {% trans "No image selected" %}
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="image-class">
                                {% for klass in classes %}
                                    <option value="{{ klass.value }}" {% if klass.selected %}selected="selected"{% endif %}>{{ klass.title }}</option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="image-size">
                                <option value="">{% trans "Original" %}</option>
                                {% for size in sizes %}
                                    <option value="{{ size.value }}" {% if size.selected %}selected="selected"{% endif %}>{{ size.title }}</option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value='{% trans "Insert" %}' id="insert-image" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <h1>{% trans "Upload image to current object: " %} {{ current_obj.title }}</h1>
    {% if display_upload %}
        <form action="{% url 'lfc_fb_upload_image' %}"
              method="post"
              enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="obj_id" value="{{ obj_id }}">
            <input type="file" name="image" />
            <input class="ajax-submit"
                   type="submit" />
        </form>
    {% else %}
        {% trans "You have to save content object before you can upload images for it." %}
    {% endif %}
</div>
