{% extends 'layouts/admin.twig' %}

{% block content %}

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Home</a> /</li>
        <li class="end">{{ page_meta.title }}</li>
    </ul>

    <h1>{{ page_meta.title }}</h1>

    {% include 'admin/messages.twig' %}

    {% if installed_components is not empty %}
        <div class="installedComponentWrap">
            {% for type, installed_component in installed_components %}

                {% if installed_component is not empty %}

                    <div class="installedComponent">
                        <h3>Installed {{ type|capitalize }}</h3>

                        <ul>
                            {% for component in installed_component %}
                                <li>
                                    <a href="{{ component.url }}" target="_blank">{{ component.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div> <!-- .installedComponent -->

                {% endif %}

            {% endfor %}
        </div> <!-- .installedComponentWrap -->
    {% endif %}

    <form action="" method="post">
        {% for type, component_list in all_components %}
            <h3>{{ type|capitalize }}</h3>
            <table class="manage-items">
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Bitbucket URL
                    </th>
                    <th>
                        Last updated
                    </th>
                    <th>
                        Install?
                    </th>
                </tr>
                <tbody class="tabular">
                {% for component in component_list %}
                    {% if component.installed is empty %}
                        <tr>
                            <td>
                                <label for="{{ component.name }}">
                                    <strong>{{ component.name }}</strong>
                                </label>
                            </td>
                            <td>
                                <a href="{{ component.url }}" target="_blank">
                                    {{ component.url }}
                                </a>
                            </td>
                            <td>
                                {{ component.updated_at }}
                            </td>
                            <td>
                                {% if component.installed %}
                                    Already installed
                                {% else %}
                                    <input type="checkbox"
                                           id="{{ component.name }}"
                                           name="install_component[{{ type }}][]"
                                            {{ component.name in request.install_component ? 'selected' : '' }}
                                           value="{{ component.name }}"/>
                                {% endif %}
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>

        {% endfor %}

        {{ form_field({
            'label': 'Bitbucket Username',
            'name': 'bitbucket_username',
            'class': 'text',
            'id': 'bitbucket_username',
            'type': 'text',
            'errors': errors
        })|raw }}

        {{ form_field({
            'label': 'Bitbucket Password',
            'name': 'bitbucket_password',
            'class': 'text',
            'id': 'bitbucket_password',
            'type': 'password',
            'errors': errors
        })|raw }}

        <button type="submit"
                name="action"
                value="install_components"
                class="btn">
            Install selected
        </button>
    </form>

{% endblock %}