<div id="create-user-template-container" class="col-md-12">
    <h3>{{ 'users.headers.CREATE_USER' | translate }}</h3>

    <form>
        <div id="user-whole-container" class="col-md-12">
            <div id="create-user-page-one">
                <div class="label-value-pair col-md-12">
                    <label class="col-md-2">{{ 'users.labels.NAME' | translate }}</label>
                    <input type="text" required class="col-md-4" id="user-name" ng-model="info.name"
                        placeholder="{{ 'users.placeholders.NAME' | translate }}"  />
                </div>
                <div class="label-value-pair col-md-12">
                    <label class="col-md-2">{{ 'users.labels.COMPANY' | translate }}</label>
                    <select id="company-name"
                            class="form-control-static col-md-2 {{getClassForCompany()}}"
                            ng-disabled="showAddNewCompany"
                            ng-model="companySelected"
                            ng-change="selectCompany()"
                            ng-options="company.name for company in availableCompanies track by company.id">
                    </select>
                    <div id="add-new-company-button" class="col-md-1">
                        <input  type="button"
                                id="add-new-company"
                                class="btn btn-info"
                                ng-click="toggleNewCompany()"
                                value="{{ 'users.buttons.ADD_NEW_COMPANY' | translate }}"/>
                    </div>
                </div>
                <div class="new-company-details-container col-md-12" ng-if="showAddNewCompany">
                    <div class="label-value-pair col-md-12 new-company-details">
                        <label class="col-md-2">{{ 'users.labels.COMPANY_NAME' | translate }}</label>
                        <input type="text" class="col-md-4" id="new-company-name" ng-model="info.companyName"
                            placeholder="{{ 'users.placeholders.COMPANY_NAME' | translate }}"  />
                    </div>
                    <div class="label-value-pair col-md-12 new-company-details">
                        <label class="col-md-2">{{ 'users.labels.VAT' | translate }}</label>
                        <input type="text" class="col-md-4" id="new-company-vat-number" ng-model="info.vat"
                            placeholder="{{ 'users.placeholders.VAT' | translate }}"  />
                    </div>
                </div>
                <div class="label-value-pair col-md-12 company-admin-box">
                    <input type="checkbox" id="user-as-company-admin" name="companyAdmin" ng-model="info.companyAdmin">
                    <label for="companyAdmin">{{'users.labels.COMPANY_ADMIN' | translate}}</label>
                </div>
                <div class="label-value-pair col-md-12">
                    <label class="col-md-2">{{ 'users.labels.PHONE' | translate }}</label>
                    <input type="text" class="col-md-2" id="user-phone" ng-model="info.phone"
                        placeholder="{{ 'users.placeholders.PHONE' | translate }}" required />
                </div>
                <div class="label-value-pair col-md-12">
                    <label class="col-md-2">{{ 'users.labels.MAIL' | translate }}</label>
                    <input type="email" class="col-md-4" id="user-mail" ng-model="info.mail"
                        placeholder="{{ 'users.placeholders.MAIL' | translate }}" required />
                </div>
                <div class="label-value-pair col-md-12">
                    <label class="col-md-2">{{ 'users.labels.USER_TYPE' | translate }}</label>
                    <select id="user-type"
                            class="form-control-static col-md-2"
                            ng-model="userTypeSelected"
                            ng-change="checkIfCLIsNeeded()"
                            ng-options="role.name for role in roles track by role.id"
                            required>
                    </select>
                </div>
                <div class="label-value-pair col-md-12">
                    <label class="col-md-2">{{ 'users.labels.USERNAME' | translate }}</label>
                    <input type="text" class="col-md-4" id="username" ng-model="info.username"
                        placeholder="{{ 'users.placeholders.USERNAME' | translate }}" required />
                </div>
                <div class="label-value-pair col-md-12">
                    <label class="col-md-8">{{ 'users.forms.messages.AUTOMATIC_PASSWORD' | translate }}</label>
                </div>
            </div>

            <div id="create-user-page-two" ng-if="isSelectCLVisible()" class="col-md-12">
                <div class="alert alert-info">
                    <span class="glyphicon glyphicon-info-sign"></span>
                    {{'users.headers.SET_COMMERCIAL_LEAD' | translate}}
                </div>
                <div id="choose-commercial-leads-container">
                    <div class="col-md-12">
                        <div class="choose-cl-title col-md-4">
                            {{'users.headers.SELECT_CL' | translate}}
                        </div>
                        <div class="choose-cl-title col-md-5">
                            {{'users.headers.SELECTED_CL' | translate}}
                        </div>
                    </div>

                    <div id="choose-cl-lists-container" class="cl-lists col-md-12">
                        <div class="choose-cl col-md-4">
                            <div id="available-cl-list-container"
                                class="choose-cl-list"
                                data-drop="true"
                                jqyoui-droppable="{onDrop:'droppedCommercialLead(\'available\')'}">
                                <div ng-repeat="(key, clInfo) in availableCommercialLeads"
                                    data-drag="true"
                                    jqyoui-draggable="{animate:true, onStart:'startEventStyle(\'available\', key)', onStop:'endEventStyle()', scroll: false}"
                                    data-jqyoui-options="{revert: 'invalid', containment:'#choose-cl-lists-container', scroll: false}">
                                    <div class="link-cl-user choose-cl-row">
                                        <label class="link-cl-user-header">
                                            {{'users.forms.labels.NAME' | translate}}:
                                        </label>
                                        <div class="link-cl-user-data">
                                            {{clInfo.name}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="draggable-icon col-md-1">
                            <span class="glyphicon glyphicon-transfer"></span>
                        </div>

                        <div class="choose-cl col-md-4">
                            <div id="selected-cl-list-container"
                                class="choose-cl-list"
                                data-drop="true"
                                jqyoui-droppable="{onDrop:'droppedCommercialLead(\'selected\')'}">
                                <div ng-repeat="(key, clInfo) in selectedCommercialLeads"
                                    data-drag="true"
                                    jqyoui-draggable="{animate:true, onStart:'startEventStyle(\'selected\', key)', onStop:'endEventStyle()', scroll: false}"
                                    data-jqyoui-options="{revert: 'invalid', containment:'#choose-cl-lists-container', scroll: false}">
                                    <div class="link-cl-user choose-cl-row">
                                        <label class="link-cl-user-header">
                                            {{'users.forms.labels.NAME' | translate}}:
                                        </label>
                                        <div class="link-cl-user-data">
                                            {{clInfo.name}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="user-action-buttons" class="col-md-12">
            <input  type="submit"
                    id="add-new-user"
                    class="btn btn-info"
                    ng-click="saveUserInDB()"
                    value="{{ 'users.buttons.SAVE' | translate }}"/>

        </div>
    </form>
</div>
