{% load i18n cosinnus_tags djajax_tags %}

<div class="fadedown">
    <div type="button" class="btn w100 btn-{% if active %}extra-{% endif %}emphasized {{ extra_classes }}" {% if extra_atts %}{{ extra_atts }}{% endif %}>
    {% comment %} <button type="button" class="btn w100 btn{% if active %}-extra{% endif %}-emphasized {{ extra_classes }}" href="{{ href }}"> {% endcomment %}
        <ul class="media-list">
            <li class="media">
                <a class="pull-left btn-extra-emphasized" href="{{ href }}">
                    {% if icon_content %}
                        {{ icon_content }}
                    {% else %}
                        <i class="fa {{ icon }}"></i>
                    {% endif %}
                </a>
                <a id="folder_clickarea_{{ folder.group.pk }}_{{ folder.pk }}" class="pull-right fadedown-clickarea edit-this-clickarea" title="{% trans "Edit folder" %}" href="#">
                    <i class="fa fa-chevron-down"></i>
                </a>
                <div class="media-body" href="{{ href }}" >
                    <span>{{ label }}</span>
                    {% captureas on_success %}$.cosinnus.restoreThisClickarea{% endcaptureas %}
                    {% captureas on_success_args %}#folder_clickarea_{{ folder.group.pk }}_{{ folder.pk }}{% endcaptureas %}
                    <input id="folder_{{ folder.group.pk }}_{{ folder.pk }}" class="form-control" style="display: none;" 
                        placeholder="{% trans "Folder name" %}" value="{{ label }}" 
                        {% djajax_connect folder.title trigger_on="enter_key" empty="false" on_success=on_success on_success_args=on_success_args %} />
                </div>
            </li>
        </ul>
    </div>
    
    <div>
        <div type="button" class="btn btn-emphasized fine-space" onclick="$.cosinnus.pressEnterOn('#folder_{{ folder.group.pk }}_{{ folder.pk }}')">
            <ul class="media-list">
                <li class="media">
                    <span class="pull-right btn-extra-emphasized" href="#">
                        <i class="fa fa-floppy-o"></i>
                    </span>
                    <div class="media-body">
                        {% trans "Save" %}
                    </div>
                </li>
            </ul>
        </div>
        <div type="button" class="btn btn-emphasized regular-space" title="{% trans "Delete folder" %}" data-toggle="modal" data-target="#deleteFolder_{{folder.pk}}">
            <ul class="media-list">
                <li class="media">
                    <span class="pull-right btn-extra-emphasized" href="#">
                        <i class="fa fa-trash-o"></i>
                    </span>
                    <div class="media-body">
                        {% trans "Delete" %}
                    </div>
                </li>
            </ul>
        </div>
        <div type="button" class="btn btn-emphasized large-space" title="{% trans "Download" %}" href="{{ href }}download/">
            <ul class="media-list">
                <li class="media">
                    <span class="pull-right btn-extra-emphasized">
                        <i class="fa fa-download"></i>
                    </span>
                    <div class="media-body">
                        {% trans "Download" %}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

{% captureas modal_id %}deleteFolder_{{folder.pk}}{% endcaptureas %}
{% captureas title %}{% trans "Delete folder" %}{% endcaptureas %}
{% captureas label %}{% trans "Do you really want to delete this folder and ALL folders and items it contains? This actions CANNOT be reversed!" %}{% endcaptureas %}
{% include "cosinnus/modal_box.html" with id=modal_id label=label title=title form_action=folder.get_delete_url %}
        