{% extends '::base_admin.html.twig' %}

{% if id is defined %}
    {% set _title = 'cms.post.update.title' %}
{% else %}
    {% set _title = 'cms.post.new.title' %}
{% endif %}
{% set _route = app.request.attributes.get('_route') %}
{% block title %}{{ _title|trans }}{% endblock %}

{% block body %}
 <div class="row-fluid" id="page-header">
    <div class="span9"><h1>{{ block('title') }}</h1></div>
    <div class="span3">
        {% if id is defined  and (entity.deletable is not defined or entity.deletable) %}
        <a class="btn btn-danger btn-default pull-right" href="{{ path('admin_cms_post_delete', {'id':id}) }}" id="delete" data-confirm="{% trans %}Are you sure you really want to delete this entity?{% endtrans %}" data-original-title="{% trans %}Delete this entity{% endtrans %}" onclick="return confirmDelete(this);">
            <i class="fa fa-eraser"></i>
            {% trans %}Delete{% endtrans %}
        </a>
    </div>
    {% endif %}
    </div>
</div>
{{ breadcrumb() }}
<div id="manager">
    <div class="entity-form spacer">
        {% if languages.1 is defined %}
            <div id="languages" class="tab-languages">
                <ul>
                {% for language in languages %}
                    <li>
                        <a href="#{{ language.locale }}"><img src="{{ asset('twtools/images/icones/32x32/' ~ language.logo) }}" alt="{{ language.locale }}"/></a>
                    </li>
                {% endfor %}
                </ul>
                {% for language,form in forms %}
                <div id="{{ language }}">
                    {% include 'TwtoolsCmsBundle:CmsPostAdmin:form.html.twig' with { 'formview': form } %}
                </div>
                {% endfor %}
            </div>
        {% else %}
            {% include 'TwtoolsCmsBundle:CmsPostAdmin:form.html.twig' with { 'formview': form, 'language': languages.0 } %}
        {% endif %}
    </div>

{% if entity.id is not null %}
<hr />
    <div class="row-fluid clearfix entity-form spacer">
    <span class="span9">
        <ul id="gallery" class="thumbnails gallery">
        {% for media in entity.medias %}
            <li class="span3" id="file-uploader-item-{{ media.id }}">
                <div class="thumbnail">
                    <h5 id="edittitle-{{ media.id }}" style="display: block;" title="{{ media.title }}">{{ media.title }}</h5>
                    {% if media.type == 1 %}
                    <a href="{{ asset(media.image) }}" title="{% trans %}View larger{% endtrans %}" class="ui-icon-zoomin thumbnail">
                        <img src="{{ asset(media.image) }}" alt="{{media.description}}" />
                    </a>
                    {% else %}
                    <a href="{{ asset(media.image) }}" title="{% trans %}View{% endtrans %}" class="thumbnail">
                        <i class="fa fa-file-text fa-5x"></i>
                    </a>
                    {% endif %}
                    <div class="description" id="editdescription-{{ media.id }}" style="display: block;" title="{{media.description}}">{{media.description}}</div>
                    <div class="source" id="editsource-{{ media.id }}" style="display: block;">{{media.source}}</div>
                    <div class="order" id="editorder-{{ media.id }}" style="display: block;" title="{% trans %}Order by{% endtrans %}">{{media.order}}</div>
                    <p>
                        {% if media.type == 1 %}
                        <a href="{{ asset(media.image) }}" title="{% trans %}View larger{% endtrans %}" class="btn btn-small ui-icon-zoomin">{% trans %}View larger{% endtrans %}</a>
                        {% endif %}
                        <a href="{{ path('admin_cms_file_delete', { 'id': media.id }) }}" title="{% trans %}Delete this image{% endtrans %}" class="btn btn-small btn-danger ui-icon-trash">{% trans %}Delete this image{% endtrans %}</a>
                    </p>
                </div>
                <script>
                $(function() {
                    $('#file-uploader-item-{{ media.id }} h5').editInPlace({
                        url: "{{ path('admin_cms_file_update')}}",
                        params: "champ=title",
                        field_type: "text",
                        default_text: "{% trans %}(Click here to add a title){% endtrans %}",
                    });
                    $('#file-uploader-item-{{ media.id }} .description').editInPlace({
                        url: "{{ path('admin_cms_file_update')}}",
                        params: "champ=description",
                        field_type: "textarea",
                        textarea_rows: "2",
                        textarea_cols: "15",
                        default_text: "{% trans %}(Click here to add a description){% endtrans %}",
                    });
                    $('#file-uploader-item-{{ media.id }} .source').editInPlace({
                        url: "{{ path('admin_cms_file_update')}}",
                        params: "champ=source",
                        field_type: "text",
                        default_text: "{% trans %}(Video address here){% endtrans %}",
                    });
					$('#file-uploader-item-{{ media.id }} .order').editInPlace({
						url: "{{ path('admin_cms_file_update')}}",
						params: "champ=order",
						field_type: "text",
						default_text: "0",
					});
                });
                </script>
            </li>
        {% endfor %}
        </ul>
    </span>
    <span class="span3">
        {% render controller("TwtoolsFileManagerBundle:FileAdmin:new", {'id': entity.id, 'updateRoute': 'admin_cms_file_update', 'uploadRoute': 'admin_cms_file_upload'}) %}
    </span>
    {% endif %}
</div>
<script>
// Get the div that holds the collection of tags
var collectionHolder = $('div.tagvalues');

// setup an "add a tag" link
var $tags = $('<span>default</span>');
var $addTagLink = $('<a href="#" class="add_tag_link">{% trans %}Add a tag{% endtrans %}</a>');
var $newLinkLi = $('<div style=\'clear: both\'></div>').append($addTagLink);

jQuery(document).ready(function() {
    collectionHolder.find('span').each(function() {
        addTagFormDeleteLink($(this));
    });
    // add the "add a tag" anchor and li to the tags ul
    // Get the data-prototype we explained earlier
    var prototype = $('div.tags').attr('data-prototype');

    // Replace '__name__' in the prototype's HTML to
    // instead be a number based on the current collection's length.
    var number = collectionHolder.children().length;
    var newForm = prototype.replace(/__name__/g, number).replace(/hidden/g, 'text');

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<div></div>').append(newForm);
    observeTagInput($newFormLi, number);
    $('div.tags').prepend($newFormLi);
    //collectionHolder.prepend($newFormLi);
    $addTagLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();
        // add a new tag form (see next code block)
        addTagForm(collectionHolder, $newLinkLi);
    });
});
function observeTagInput($newFormLi, number) {
    $newFormLi.on('keydown',function(touche){ // on écoute l'évènement keyup()
        var appui = touche.which || touche.keyCode; // le code est compatible tous navigateurs grâce à ces deux propriétés
        if(appui == 188 || appui == 13){ // si le code de la touche est égal à 13 (Entrée)
            touche.preventDefault();
            //alert($('#post_tags_'+number+'_title').val());
            var value = $('#post_tags_'+number+'_title').val();
            var name = $('#post_tags_'+number+'_title').attr('name');
            $('#post_tags_'+number+'_title').remove();
            var $oldtag = $('<span class="tagindiv"></span>').prepend( value + '<input type="hidden" name="'+name+'" value="'+value+'" id="post_tags_'+number+'_title" />');
            collectionHolder.append($oldtag);
            $oldtag.prepend($('#post_tags_'+number+'_title'));
            var input = $oldtag;
            addTagForm(collectionHolder, $newLinkLi);
            addTagFormDeleteLink($oldtag);
        }
    });
}
function addTagForm(collectionHolder, $newLinkLi) {
    var prototype = $('div.tags').attr('data-prototype');
    var number = collectionHolder.children().length;
    var newForm = prototype.replace(/__name__/g, number).replace(/hidden/g, 'text');
    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<div></div>').append(newForm);
    observeTagInput($newFormLi, number);
    $('div.tags').prepend($newFormLi);
    $('#post_tags_'+number+'_title').focus();
}
function addTagFormDeleteLink($tagFormLi) {
    var $removeFormA = $('<a href="#" title="{% trans %}Delete this tag{% endtrans %}"><i class="fa fa-trash-o"></i></a>');
    $tagFormLi.append($removeFormA);
    $removeFormA.on('click', function(e) {
        e.preventDefault();
        // remove the li for the tag form
        $tagFormLi.remove();
    });
}
$(function() {
    $( "#languages" ).tabs({
        cookie: { expires: 100 }
    });
});
</script>
{% endblock %}