<div class="col-md-6" ng-repeat="orderPackage in packages">
    <div id="installation-scheduler-container" ng-controller="installationSchedulerCtrl" ng-init="getInstallationDetails()">
        <div ng-if="isInstallationInOrder" class="col-md-12 outside-process-steps">
            <h3 class="additional-procurement-header">{{'orders.headers.INSTALLATION_SCHEDULING' | translate}} {{orderPackage.packageName}}</h3>
            <hr />
            <fieldset ng-disabled="isInstallationSchedulingDisabled()" class="show-installation-dates">
                <div class="choose-installation-layer row" ng-if="!isChangeInstallationAvailable">
                    <div class="col-md-12" ng-if="multipleInstallCompanies">
                        <label class="col-md-5">{{'orders.tables.extra.CHOOSE_INSTALLATION' | translate}}</label>
                        <select id="installation-companies-group"
                                class="form-control-static {{optionClass}} col-md-4"
                                ng-model="installationCompany"
                                ng-options="installCompany.name for installCompany in installCompanies track by installCompany.id"
                                ng-change="showHideInstallationDialog(installationCompany.id)">
                        </select>
                        <div id="confirm-change-installation-company"
                             dialog
                             ng-if="isInstallationDialogVisible[installationCompany.id]"
                             on-confirmation="saveInstallationForPackage"
                             on-close="showHideInstallationDialog"
                             is-modal="true"
                             has-buttons="true"
                             parameters="installationCompany.id"
                             title="{{'orders.headers.CHANGE_INSTALLATION_COMPANY' | translate}}">
                             <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.CHANGE_INSTALLATION_COMPANY_CONFIRM' | translate}}: <b>{{installationCompany.name}}</b>?</p>
                        </div>
                    </div>
                    <div class="col-md-12" ng-if="!multipleInstallCompanies">
                        <label class="col-md-5">{{'orders.tables.extra.INSTALLATION_COMPANY' | translate}}:</label>
                        {{installationCompany.name}}
                    </div>
                </div>
                <div ng-if="isChangeInstallationAvailable" class="row">
                    <div class="col-md-12">
                        <label class="col-md-5">{{'orders.tables.extra.INSTALLATION_COMPANY_SELECTED' | translate}}:</label>
                        <span class="col-md-7">{{installationCompany.name}}</span>
                    </div>
                </div>

                <?php
                    require('DisplayEarliestInstallationDate.html');
                 ?>
             </fieldset>
             <fieldset ng-disabled="isInstallCompanySelectedAndScheduleDisabled()" class="set-installation-dates">
                <div id="propose-installation-dates" class="row">
                    <?php
                        require('InstallationSchedulingDatesTemplate.html');
                     ?>
                    <div id="installation-files-container" class="col-md-12" ng-if="!isInstallCompanySelectedAndScheduleDisabled()">
                        <form name="form" class="col-md-4">
                            <div ngf-drop="uploadFile($file)"
                                ng-model="files"
                                ngf-drag-over-class="'dragover'"
                                ngf-select="uploadFile($file)"
                                ngf-pattern="'.pdf,.docx,.doc,.xlsx,.xls,.odt,.ods,.png,.jpg,.jpeg'"
                                ngf-max-size="20MB"
                                class="drop-box">{{'orders.headers.SELECT_INSTALL_DOCUMENT' | translate}}</div>
                        </form>
                        <div class="uploaded-documents col-md-8">
                            <div class="document-layer" ng-repeat="document in installationDocuments">
                                <a href="utils/api/downloadFile?idDocument={{document.idDocument}}&fileName={{document.documentName}}.{{document.extension}}">
                                    {{document.documentName}}.{{document.extension}}
                                </a>
                                <div id="remove-document-{{document.idDocument}}" class="remove-document" ng-if="document.isUploadedByMe">
                                    <span class="remove-document-btn glyphicon glyphicon-remove" ng-click="showHideDialog(document.idDocument)">
                                        {{'orders.tables.extra.REMOVE' | translate}}
                                    </span>
                                    <div id="confirm-remove-document"
                                         dialog
                                         ng-if="isDialogVisible[document.idDocument]"
                                         on-confirmation="removeInstallDocument"
                                         on-close="showHideDialog"
                                         is-modal="true"
                                         has-buttons="true"
                                         parameters="document.idDocument"
                                         title="{{'orders.headers.REMOVE_DOCUMENT' | translate}}">
                                      <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.REMOVE_DOCUMENT_CONFIRMATION' | translate}} <b>{{document.documentName}}.{{document.extension}}</b>?</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
            <div class="change-installation-btn col-md-12"
                ng-if="isChangeInstallationAvailable"
                ng-click="showHideChangingInstallationDialog()">
                <div class="alert alert-info col-md-5">
                    <span class="glyphicon glyphicon-refresh"></span>
                    {{'orders.headers.CHANGE_INSTALLATION_COMPANY' | translate}}
                </div>
                <div id="confirm-possibility-to-change-installation-company"
                     dialog
                     ng-if="isChangingInstallationDialogVisible"
                     on-confirmation="activateChangeInstallation"
                     on-close="showHideChangingInstallationDialog"
                     is-modal="true"
                     has-buttons="true"
                     title="{{'orders.headers.ACTIVATE_CHANGE_INSTALLATION_COMPANY' | translate}}">
                     <p class="alert alert-warning"><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.ACTIVATE_CHANGE_INSTALLATION_COMPANY_CONFIRM' | translate}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
