{% extends 'base.html.twig' %}
{% block title %}CRM | {% trans %}Add new skills{% endtrans %}{% endblock %}
{% block body %}

    <nav aria-label="breadcrumb" style="margin-bottom: 1.5em;">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_viewhome') }}">Home</a></li>
            <li class="breadcrumb-item active"><a
                        href="{{ path('app_settings') }}">{% trans %}Settings{% endtrans %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans %}Add new skills{% endtrans %}</li>
        </ol>
    </nav>

    <div class="row justify-content-center">
        <div class="col-md-7 col-lg-8">
            <h2 class="h3">{% trans %}Add new skills{% endtrans %}</h2>

            {{ form_start(addSkillsForm) }}
            <div class="row">
                <div class="col-4">
                    {{ form_label(addSkillsForm.skill) }}:
                </div>
                <div class="col-8">
                    {{ form_widget(addSkillsForm.skill) }}
                </div>
            </div>
            <div class="row justify-content-center" style="margin-top: 2em">
                <div class="col-auto">
                    <button class="btn btn-primary" type="submit">{% trans %}Add skill{% endtrans %}</button>
                </div>
            </div>
            {{ form_end(addSkillsForm) }}
        </div>
        <div class="col-md-5 col-lg-4">
            <h2 class="h3">{% trans %}Skills list{% endtrans %}</h2>
            {% for skill in skillsList %}
                {{ skill.name | trans}} <br/>
            {% endfor %}
        </div>
    </div>
{% endblock %}