{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/lib/colorpicker/bootstrap-colorpicker.css') }}">
{% endblock %}

{% block title %}{{ 'departments.edit_department'|trans  }}{% endblock %}

{% block body %}

<div class="container-fluid">
    {{ form_start(form, {method: 'POST', action: path( "edit_department", {"rowid": rowid} ) , enctype:'multipart'}) }}
    <div class="md-form">
        {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
        {{ form_label(form.name, "", {'attr': {'class': 'bmd-label-floating'}}) }}
        <div class="invalid-feedback">
           {{ form_errors(form.name) }}
        </div>
    </div>
    <div class="md-form">
        {{ form_widget(form.description, {'attr': {'class': 'md-textarea form-control'}}) }}
        {{ form_label(form.description, "", {'attr': {'class': 'bmd-label-floating'}}) }}
        <div class="invalid-feedback">
           {{ form_errors(form.description) }}
        </div>
    </div>
    <div class="md-form">
        {{ form_widget(form.color, {'attr': {'class': 'form-control colorpicker-control'}}) }}
        {{ form_label(form.color, "", {'attr': {'class': 'bmd-label-floating'}}) }}
        <div class="invalid-feedback">
            {{ form_errors(form.color) }}
        </div>
    </div>
    <div class="md-form form-group">
        {{ form_widget(form.code, {'attr': {'class': 'form-control'}}) }}
        {{ form_label(form.code, "", {'attr': {'class': 'bmd-label-floating'}}) }}
        <div class="invalid-feedback">
            {{ form_errors(form.code) }}
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 form-group">
            {{ form_widget(form.fkDepartment, {'attr': {'class': 'mdb-select md-form', 'searchable': 'Search here..', 'data-clearbutton' : ''}}) }}
            <label class="mdb-main-label">{{ 'departments.choose_parent_department'|trans }}</label>
            <div class="invalid-feedback">{{ form_errors(form.fkDepartment) }}</div>
        </div>
    </div>

    <div class="md-form">
        {{ form_widget(form.visible, {'attr': {'class': 'form-check-input', (rowid)?'':'checked':'checked'}}) }}
        {{ form_label(form.visible, "", {'attr': {'class': 'form-check-label'}}) }}   
        <div class="invalid-feedback">
            {{ form_errors(form.visible) }}
        </div>       
    </div>

    <div class="row">
        <div class="md-form col-sm">
            {{ form_widget(form.cancel, {'attr': {'class': 'btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect cancel'}}) }}
        </div>

        <div class="md-form col-sm">
            {{ form_widget(form.save, {'attr': {'class': 'btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect', type:"submit"}}) }}
        </div>
    </div>


    {{ form_end(form) }}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/lib/colorpicker/bootstrap-colorpicker.js') }}"></script>
{% endblock %}