{% extends "base.html" %}
{% from 'macros/navbar.html' import navbar %}

{% block navbar_start %}
{{ navbar(navbar_items) }}
{% endblock %}

{% block content %}
<div class="section is-medium has-text-centered">
    <h1 class="title">
        {{ gettext("Request collaboration")}}
    </h1>

    <div class="box has-background-info-light has-text-info-dark">
        <div class="icon">{{ "info-circle"|icon }}</div>
        <p>
            {{ gettext("Here you can request a collaboration.")}} <br><br>
            {{ gettext("The coordinator of the collaboration decides if they add your plan to the collaboration.")}}<br>
            {{ gettext("All plans in a collaboration should offer the same or a similar product.")}}
        </p>
    </div>
    <div class="columns is-centered">
        <div class="column"></div>
        <div class="column is-8 has-text-centered">
            {% if view_model is defined %}
            <div class="box">
                {% for notification in view_model.notifications %}
                <div {% if view_model.is_error %}class="notification is-danger" {% else
                    %}class="notification is-primary" {% endif %}>{{ notification }}</div>
                {% endfor %}
            </div>
            {% endif %}

            {% if form is defined %}
            {% for field_name, field_errors in form.errors|dictsort if field_errors %}
            {% for error in field_errors %}
            <div class="notification is-danger">
                {{ error }}
            </div>
            {% endfor %}
            {% endfor %}
            {% endif %}

            <div class="content">
                {% if list_plans_view_model is defined and list_plans_view_model.show_plan_listing %}
                <form method="post">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="field has-addons has-addons-centered">
                        <div class="control has-icons-left">
                            <div class="select has-icons-left">
                                <select name="plan_id" required>
                                    <option>{{ gettext("My plan...")}}</option>
                                    {% for plan in list_plans_view_model.plans %}
                                    <option value="{{ plan.id }}">{{ plan.prd_name_truncated }} ({{
                                        plan.id_truncated
                                        }})
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <span class="icon is-left">
                                {{ "file"|icon }}
                            </span>
                        </div>
                        <div class="control">
                            <input class="input" type="text" placeholder="{{ gettext('Collaboration ID') }}" ,
                                name="collaboration_id" required>
                        </div>
                        <div class="field">
                            <div class="control">
                                <button class="button is-primary" name="request_collab" value="request_collab"
                                    type="submit">{{ gettext("Request collaboration")}}</button>
                            </div>
                        </div>
                    </div>
                </form>
                {% else %}
                <p>{{ gettext("No plans yet.")}}</p>
                {% endif %}
            </div>
        </div>
        <div class="column"></div>
    </div>
</div>

{% endblock %}