{% load static %}
{% load thumbnail %}
<div class="row">
    <div class="span3">
        <ul class="modal-menu">
            <li class="bibliotheque-link"><a data-type-media="image" data-title="Bibliothèque" class="btn open-modal" href="{% url 'composer_modal_image_library' branding=branding %}"><i class="icon-folder-open"></i> Bibliothèque</a></li>
            <li><a class="btn active" tabindex="-1" href="#"><i class="icon-plus-sign"></i> Ajouter une image</a></li>
        </ul>
    </div>
    <div class="span8 popup-content">
    <h4>Informations et source de l'image</h4>
    <form class="form-horizontal" action="{% url 'composer_modal_image' branding=branding %}" enctype="multipart/form-data" method="post">{% csrf_token %}
        {% if image_pk %}<input type="hidden" value="{{ image_pk }}" name="image_pk">{% endif %}
	    {% for error in form.errors %}
	    <span class="error">{{ error }}</span>
	    {% endfor %}
        <div class="control-group">
            <label class="control-label" for="media-title">Titre :</label>
            <div class="controls">
                <input type="text" name="title" id="id_title" placeholder="Titre de l'image..." maxlength="1024" value="{{ form.title.value|default_if_none:'' }}"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="media-description">Description :</label>
            <div class="controls">
                <textarea name="description" id="id_description">{{ form.description.value|default_if_none:"" }}</textarea>
            </div>
        </div>
        <!--div class="control-group">
            <label class="control-label" for="media-type-select">Type de la source :</label>
            <div class="controls">
                <select name="" id="media-type-select">
                    <option value="url">URL</option>
                    <option value="upload" selected>Upload</option>
                </select>
            </div>
        </div>
        <div class="control-group input-image-url">
            <label class="control-label" for="media-url-link">URL de l'image :</label>
            <div class="controls">
                <input type="text" name="title-media" id="media-url-link" placeholder="Titre de l'image..">
                <a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
            </div>
        </div-->
        <div class="control-group input-image-upload">
            <label class="control-label" for="media-url-link">Fichier de l'image :<br/>(jpg, png)</label>
            <div class="controls">
                <input type="file" name="image_file" id="id_image_file" accept="image/jpeg, image/png"/>
                <!--a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a-->
                {% if form.image_file.value %}
                <p>Image actuelle :</p>
                {% thumbnail form.image_file.value "100" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}
                {% endif %}
                <br/>
                
            </div>
        </div>
        <div class="control-group">
            <div class="controls previsualisation">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <a href="#" class="btn-cancel btn btn-inverse"><i class="icon-reply" data-dismiss="modal" aria-hidden="true"></i> Annuler</a>
                <button type="submit" class="btn btn-success"><i class="icon-save"></i> Sauvegarder</button>
            </div>
        </div>
    </form>
    </div>
</div>