{% extends "account/base.html.twig" %}

{% block title %}
    {{ "Client applications" | trans }}
{% endblock %}

{% set selected = "developer" %}

{% block content_account %}
    <div class="row-fluid">
        <div class="span7">
            <div id="content-apps">
                <h1>Phraseanet Developer Center</h1>
                <h3>{{ "Mes applications" | trans }}</h3>
                {% if applications|length > 0 %}
                    <ul class="app-list unstyled">
                        {% for application in applications %}
                              <li id="app_{{ application.getId() }}">
                                    <a href="#appModal-{{ loop.index }}" role="button" data-toggle="modal" class="pull-right btn btn-danger btn-small" type="button">
                                        {{ "button::supprimer" | trans }}
                                    </a>
                                    <!-- Modal -->
                                    <div id="appModal-{{ loop.index }}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h3 id="myModalLabel">{{ application.getName() }}</h3>
                                        </div>
                                        <div class="modal-body">
                                            <p>{{ "Are you sure you want to delete this application?" | trans }} </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn" data-dismiss="modal" aria-hidden="true">{{ "No" | trans }}</button>
                                            <a href="{{ path("delete_developers_application", {"application" : application.getId()}) }}" class="delete-app btn btn-info">{{ "Yes" | trans }}</a>
                                        </div>
                                    </div>
                                    <p class="app-row">
                                      <strong>
                                        <a  class="link" href="{{ path("developers_application", {"application" : application.getId}) }}">
                                            {{ application.getName() }}
                                        </a>
                                      </strong>
                                    </p>
                                    <p class="app-row">{{ application.getDescription()|truncate(120, true, "...") }}</p>
                              </li>
                        {%endfor%}
                    </ul>
                {% else %}
                    <div>
                      {{ "Aucune application creee." | trans }}
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="span5">
            <div class="well well-small">
                <p>{{ "Decouvrez la documentation" | trans }}</p>
                <a href="https://docs.phraseanet.com/4.0/en/Devel/" target="_blank" class="btn btn-large text-center input-block-level">
                    {{ "Demarrer avec l\'API Phraseanet" | trans }}
                </a>
            </div>
            <div class="well well-small">
                <p>{{ "Creez une application pour commencer a utiliser l\'API Phraseanet" | trans }}</p>
                <a href="{{ path("developers_application_new") }}" class="btn-info btn btn-large text-center input-block-level">
                    {{ "Creer une nouvelle applications" | trans }}
                </a>
            </div>
        </div>
    </div>
    <script>
     $('a.delete-app').bind('click', function (e) {
            e.preventDefault();
            var $this = $(this);
            var li = $this.closest('li');

            $.ajax({
                type: 'DELETE',
                url: $this.attr('href'),
                dataType: 'json',
                data: {},
                success: function success(data) {
                    if (data.success) {
                        li.find('.modal').modal('hide');
                        li.remove();
                    }
                }
            });
        });
    </script>

{% endblock %}