<div class="modal-header">
    <h3 class="modal-title">{{'Create New Card' | translate}}</h3>
</div>
<div class="modal-body">
    <form name="card.form" class="form-horizontal">
        <!-- Name -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{'Name' | translate}}</label>
            <div class="col-sm-10">
                <input ng-model="card.name" name="name" autofocus type="text" class="form-control" required />
                <small ng-if="card.form.name.$error.required">{{'Name is required' | translate}}</small>
            </div>
        </div>
        <!-- Description -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{'Description' | translate}}</label>
            <div class="col-sm-10">
                <textarea ng-model="card.description" rows="3" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <!-- Status -->
            <label class="col-sm-2 control-label">{{'Status' | translate}}</label>
            <div class="col-sm-4">
                <select ng-model="card.status"
                        ng-options="swimlane for swimlane in boardProperties.swimlanes"
                        ng-init="card.status = currentSwimlane"
                        class="form-control"></select>
            </div>
            <!-- Priority -->
            <label class="col-sm-2 control-label">{{'Priority' | translate}}</label>
            <div class="col-sm-4">
                <select ng-model="card.priority"
                        ng-options="priority for priority in boardProperties.priorities"
                        class="form-control"
                        convert-to-number>
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <!-- Estimated hours -->
            <label class="col-sm-2 control-label">{{'Estimated hours' | translate}}</label>
            <div class="col-sm-4">
                <input ng-model="card.estimatedHours" type="number" min="0" ng-blur="roundEstimatedHours()" class="form-control" />
            </div>
            <!-- Due date -->
            <label class="col-sm-2 control-label">{{'Due date' | translate}}</label>
            <div class="col-sm-4">
                <!--<p class="input-group kanban-datepicker">
                    <input ng-model="card.dueDate"
                           type="text"
                           datepicker-popup="dd-MM-yyyy"
                           datepicker-options="datepicker.options"
                           is-open="datepicker.opened"
                           class="form-control" />
                    <span class="input-group-btn">
                        <button ng-click="datepicker.toggleDatepicker($event)" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                        </button>
                    </span>
                </p>-->
                <div
                     wizdom365-datetime-picker="" 
                     disable-previously-dates="true" 
                     date="card.dueDate" 
                     disable-weekends="false"
                     show-date-picker="true" 
                     show-time-picker="false"></div>
            </div>
        </div>
        <!-- Tags -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{'Tags' | translate}}</label>
            <div class="col-sm-10">
                <div ng-init="card.tags = []" class="input-group">
                    <div class="input-group-btn" dropdown>
                        <button type="button" class="btn btn-default" dropdown-toggle>
                            {{'Select' | translate}}&nbsp;<span class="caret"></span>
                        </button>
                        <ul ng-click="$event.stopPropagation()" class="dropdown-menu" role="menu">
                            <li ng-repeat="tag in boardProperties.tags" role="menuitem">
                                <a ng-click="toggleTag(card.tags, tag)"
                                   ng-class="{'kanban-selected-tag': card.tags.indexOf(tag) !== -1}"
                                   href="">
                                    {{tag.value}}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <p type="text" class="form-control">{{getTagsNameArray(card.tags)}}</p>
                </div>
            </div>
        </div>
        <!-- Assign to -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{'Assign to' | translate}}</label>
            <div class="col-sm-10">
                <div wizdom365-principalpicker mode="users" principals="card.assignedTo" class="principal-picker"></div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button ng-click="create(card)" type="button" class="btn btn-primary wiz-btn-padding" ng-disabled="card.form.$invalid">{{'Create' | translate}}</button>
    <button ng-click="cancel()" type="button" class="btn btn-default wiz-btn-padding">{{'Cancel' | translate}}</button>
</div>