<div id="installation-scheduler-container" ng-controller="installationSchedulerCtrl" ng-init="getInstallationDetails()">
    <div ng-if="isMyInstallationCompany" class="col-md-5 outside-process-steps">
        <h3 class="additional-procurement-header">{{'orders.headers.INSTALLATION_SCHEDULING' | translate}}</h3>
        <hr />
        <fieldset ng-disabled="isInstallationSchedulingDisabled()" class="set-installation-dates">
            <div class="choose-installation-layer row">
                <div class="col-md-12">
                    <label class="col-md-5">{{'orders.tables.extra.INSTALLATION_COMPANY' | translate}}:</label>
                    {{installationCompany.name}}
                </div>
            </div>

            <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>
</div>
