<div class="confirmation-dates-container col-md-12">
    <div class="installation-dates-history col-md-12" ng-repeat="(confirmationDate, dateInfo) in confirmationDates">
        <div id="installation-scheduling-dates-container" class="col-md-12">
            <div class="col-md-11">
                <span class="installation-date-proposed confirmation-{{dateInfo.lastStatus}} col-md-3">{{confirmationDate}}</span>
                <div id="accept-date-{{idPackage}}-{{confirmationDate}}"
                    class="remove-date col-md-2 btn btn-success"
                    ng-if="canUserAcceptOrDecline(confirmationDate, dateInfo, 'declined')"
                    ng-click="showHideAcceptDialog(confirmationDate)">
                    <span class="remove-date-btn glyphicon glyphicon-ok">
                        {{'orders.tables.extra.ACCEPT' | translate}}
                    </span>
                    <div id="confirm-cancel-accept-installation-dates-{{idPackage}}"
                         dialog
                         ng-if="isAcceptDialogVisible[confirmationDate]"
                         on-confirmation="userButtonAction"
                         on-close="showHideAcceptDialog(confirmationDate)"
                         is-modal="true"
                         has-buttons="true"
                         parameters="{confirmationDate, userStatus: 'accepted'}"
                         title="{{'orders.headers.ACCEPT_MY_DATE' | translate}}">
                         <p>
                             <div ng-if="isDateAlreadyAccepted">
                                 {{'orders.messages.MULTIPLE_ACCEPT_INSTALLATION' | translate}}
                             </div>
                             <span class="glyphicon glyphicon-warning-sign"></span>
                             {{'orders.messages.ACCEPT_INSTALLATION' | translate}} <b>{{confirmationDate}}</b>?
                         </p>
                    </div>
                </div>
                <div id="decline-date-{{idPackage}}-{{confirmationDate}}"
                    class="remove-date {{offsetClass}} col-md-2 btn btn-danger"
                    ng-if="canUserAcceptOrDecline(confirmationDate, dateInfo,'accepted')"
                    ng-click="showHideDeclineDialog(confirmationDate)">
                    <span class="remove-date-btn glyphicon glyphicon-remove">
                        {{'orders.tables.extra.DECLINE' | translate}}
                    </span>
                    <div id="confirm-cancel-decline-installation-dates-{{idPackage}}"
                         dialog
                         ng-if="isDeclineDialogVisible[confirmationDate]"
                         on-confirmation="userButtonAction"
                         on-close="showHideDeclineDialog(confirmationDate)"
                         is-modal="true"
                         has-buttons="true"
                         parameters="{confirmationDate, userStatus: 'declined'}"
                         title="{{'orders.headers.DECLINE_MY_DATE' | translate}}">
                         <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.DECLINE_INSTALLATION' | translate}} <b>{{confirmationDate}}</b>?</p>
                    </div>
                </div>
                <div id="remove-date-{{idPackage}}-{{confirmationDate}}"
                    class="remove-date col-md-offset-7 col-md-2 btn btn-primary"
                    ng-if="isRemoveBtnVisible(confirmationDate)"
                    ng-click="showHideRemoveDialog(confirmationDate)">
                    <span class="remove-date-btn glyphicon glyphicon-trash">
                        {{'orders.tables.extra.REMOVE' | translate}}
                    </span>
                    <div id="confirm-cancel-remove-installation-dates-{{idPackage}}"
                         dialog
                         ng-if="isRemoveDialogVisible[confirmationDate]"
                         on-confirmation="removeMyDate"
                         on-close="showHideRemoveDialog(confirmationDate)"
                         is-modal="true"
                         has-buttons="true"
                         parameters="confirmationDate"
                         title="{{'orders.headers.REMOVE_MY_DATE' | translate}}">
                         <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.REMOVE_INSTALLATION' | translate}} <b>{{confirmationDate}}</b>?</p>
                    </div>
                </div>
            </div>
            <span class="dates-info-btn glyphicon glyphicon-info-sign col-md-1" ng-click="showDateDetails(dateInfo)"></span>
            <div class="date-row col-md-12" ng-if="dateInfo.isInfoVisible" ng-repeat="(key, details) in dateInfo.details">
                <div class="col-md-4">
                    {{details.currentDate}}
                </div>
                <div class="col-md-3 confirmation-{{details.status}}">
                    <span class="glyphicon glyphicon-{{getIcon(details.status)}}"></span>
                    {{details.status}}
                </div>
                <div class="col-md-5">
                    {{details.username}} ({{details.userType}})
                </div>
            </div>
        </div>
    </div>
</div>

<div class="add-new-date col-md-12" ng-show="showAddNewDate">
    <label class="col-md-6">{{'orders.tables.extra.INSTALLATION_DATE_PROPOSE' | translate}}</label>
    <input ng-model="installationDate"
        class="col-md-3"
        on-date-selected="updateInstallationDate"
        datepicker
        id="installation-date-propose-{{idPackage}}"/>
</div>

<div class="add-new-date-btn col-md-12" ng-if="!isInstallCompanySelectedAndScheduleDisabled()">
    <div class="col-md-3 btn btn-primary" ng-click="shouldShowAddNewDate()">
        <span class="glyphicon glyphicon-plus"></span>
        <span class="add-new-schedule">{{'orders.buttons.ADD_OPTIONAL_DATE' | translate}}</span>
    </div>
</div>
