<!-- Link error -->
<div class="row mt-5" ng-if="error">
    <div class="col-12 alert alert-danger text-center font-weight-bold" ng-bind="errMessage"></div>
</div>
<!-- Invalid Link -->
<div class="row mt-5 mx-0" ng-if="!error && link && link.link_use_type !== 2 && !loading">
    <div class="col-12 alert alert-warning text-center font-weight-bold">
        {{'VIEW_DOWNLOAD.INVALID_LINK' | translate}}
    </div>
</div>
<!-- Link is preparing -->
<div class="row mt-5 mx-0" ng-if="link && link.status === 3 && link.link_use_type === 2 ">
    <div class="col-12 alert alert-danger text-center font-weight-bold">
        {{'VIEW_DOWNLOAD.LINK_PREPARING' | translate}}
    </div>
</div>
<!-- Loading on progress -->
<div class="row mt-5" ng-if="(loading || link.status === 3) && link.link_use_type === 2">
    <div class="col-12 text-center">
        <div class="lds-facebook"><div></div><div></div><div></div>
        </div>
    </div>
</div>

<!-- Authenticate email -->
<form autocomplete="off" name="linkAuthenForm"
      ng-if="!error && link && link.status === 1 && link.link_use_type === 2 && link.verified === 1"
      ng-submit="verifyLinkEmail(linkAuthenForm.$valid,false)"
      novalidate>
    <div class="row mt-5 py-2 justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
            <div class="card shadow">
                <div class="card-header d-flex justify-content-center bg-white">
                    <strong>{{'VIEW_DOWNLOAD.INPUT_EMAIL' | translate}}</strong>
                </div>
                <div class="card-body">
                    <div class="row mx-0">
                        <div class="form-group col-12">
                            <input autocomplete="off" class="form-control text-center"
                                   name="email"
                                   ng-class="{'is-invalid': linkAuthenForm.email.$touched && linkAuthenForm.email.$invalid}"
                                   ng-model="linkAuthen.email"
                                   ng-pattern="Patterns.EMAIL_PATTERN"
                                   required
                                   maxlength="64"
                                   type="text"
                                   placeholder="{{'ACCOUNT.MAIL_ADDRESS' | translate}}">
                            <div class="invalid-feedback text-center">
                                <div ng-if="linkAuthenForm.email.$error.required">{{'VIEW_DOWNLOAD.INPUT_EMAIL_REQUIRED' | translate}}
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-block btn-primary" ng-disabled="!linkAuthenForm.$valid" type="submit">
                                {{'COMMON.NEXT' | translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!-- Authenticate PIN -->
<form autocomplete="off" name="authPinForm"
      ng-if="!!accessKey && !error && link && link.status === 1 && link.link_use_type === 2 && link.verified === 2"
      ng-submit="verifyPINCode(authPinForm.$valid)"
      novalidate>
    <div class="row mt-5 py-2 justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
            <div class="card shadow">
                <div class="card-header d-flex justify-content-center bg-white">
                    <strong>{{'VIEW_DOWNLOAD.INPUT_PIN' | translate}}</strong>
                </div>
                <div class="card-body">
                    <div class="row mx-0">
                        <div class="form-group col-12">
                            <input autocomplete="off" class="form-control text-center"
                                   name="pin"
                                   ng-class="{'is-invalid' : authPinForm.pin.$touched  &&  authPinForm.pin.$invalid}"
                                   ng-model="linkAuthen.pin"
                                   ng-pattern="Patterns.NUMBER_PATTERN"
                                   required
                                   type="text"
                                   placeholder="{{'VIEW_DOWNLOAD.PIN' | translate}}">
                            <div class="invalid-feedback text-center">
                                <div ng-if="authPinForm.pin.$error.required">{{'VIEW_DOWNLOAD.INPUT_PIN_REQUIRED' | translate}}</div>
                                <div ng-if="authPinForm.pin.$error.pattern">{{'VIEW_DOWNLOAD.INVALID_PIN' | translate}}</div>
                            </div>
                        </div>
                        <div class="col-12 form-group">
                            <button class="btn btn-block btn-primary" ng-disabled="!authPinForm.$valid || isShowButton" type="submit">
                                {{'COMMON.NEXT' | translate}}
                            </button>
                        </div>
                        <div class="col-12 d-flex justify-content-center">
                            <p class="small">{{'VIEW_DOWNLOAD.RESEND_QUOTES' | translate}}</p><p class="small text-primary font-weight-bold pointer-cursor pl-1" ng-click="verifyLinkEmail(true,true)"> {{'VIEW_DOWNLOAD.RESEND' | translate}} </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- List Items -->
<div class="row" ng-if="link.verified === 3">
    <div class="col-12 col-sm-6 col-lg-8 pb-3 px-0">
        <div class="row mx-0 py-2 border-bottom border-top bg-white form-group" ng-if="link.allowed_download_file === true">
            <div class="d-none d-lg-flex col-7">
                <button class="btn btn-outline-primary" ng-click="downloadSelected(false)"><i
                        class="fa fa-download"></i> {{'VIEW_DOWNLOAD.DOWNLOAD_ALL' | translate}}
                </button>
                <button class="btn btn-outline-primary" ng-if="selectedAll || isSelected"
                        ng-click="downloadSelected(true)"><i class="fa fa-download"></i>
                    {{'VIEW_DOWNLOAD.DOWNLOAD_SELECTED' | translate}}
                </button>
            </div>
            <div class="d-none d-lg-flex col-5 justify-content-end align-items-center">
                <span class="font-weight-bold text-primary">{{'VIEW_DOWNLOAD.LINK_EXPIRY' | translate:{date: linkExpireDate} }}</span>
            </div>
            <div class="d-flex col-12 d-lg-none">
                <button class="btn btn-outline-primary" ng-click="downloadSelected(false)"><i class="fa fa-download"></i> {{'VIEW_DOWNLOAD.DOWNLOAD_ALL' | translate}}</button>
                <button class="btn btn-outline-primary" ng-if="selectedAll || isSelected" ng-click="downloadSelected(true)"><i class="fa fa-download"></i> {{'VIEW_DOWNLOAD.DOWNLOAD_SELECTED' | translate}}</button>
            </div>
            <div class="d-flex col-12 d-lg-none align-items-center">
                <span class="font-weight-bold text-primary">{{'VIEW_DOWNLOAD.LINK_EXPIRY' | translate:{date: linkExpireDate} }}</span>
            </div>
        </div>
        <div class="row mx-0 py-2 border-bottom border-top bg-white form-group" ng-if="link.allowed_download_file !== true">
            <div class="d-flex col-12 align-items-center justify-content-end">
                <span class="font-weight-bold text-primary">{{'VIEW_DOWNLOAD.LINK_EXPIRY' | translate:{date: linkExpireDate} }}</span>
            </div>
        </div>
        <div class="row mx-0">
            <div class="col-12 col-lg-6 form-group" ng-repeat="file in listFile">
                <div class="card shadow"
                     ng-class="{'border-left-danger': file.file_type === 1 && getGroupFromMimeType(file) === 'secure',
                     'border-left-primary': file.file_type === 2 && getGroupFromMimeType(file) === 'secure',
                     'border-left-success': file.file_type === 3 && getGroupFromMimeType(file) === 'secure',
                     'border-left-warning': file.file_type === 4 && getGroupFromMimeType(file) === 'secure',
                     'border-left-secondary': (file.file_type === 5 && getGroupFromMimeType(file) === 'secure')
                        || getGroupFromMimeType(file) !== 'secure'}">
                    <div class="card-header py-2 d-flex flex-row align-items-center justify-content-between bg-white">
                        <div class="custom-control">
                            <div class="custom-checkbox" ng-if="link.allowed_download_file">
                                <input class="custom-control-input" id="{{file.id}}" type="checkbox" ng-click="toggleSelected(file)" ng-model="file._selected">
                                <label class="custom-control-label pointer-cursor" for="{{file.id}}"></label>
                            </div>
                        </div>
                        <div>
                            <i class="fas fa-lock" ng-if="file.is_encrypt === 1" title="{{'MY_EMAIL.TOOLTIP_ENCODED' | translate}}"></i>
                        </div>
                    </div>
                    <div class="card-body p-0 m-3">
                        <div class="col-12 d-flex p-0 mb-2">
                            <div class="col-1 p-0 d-flex align-items-end" ng-if="file.folder === false"
                                 ng-switch="getGroupFromMimeType(file)">
                                <!--file icon-->
                                <span ng-switch="file.file_type" ng-switch-when="secure">
                                        <i class="far fa-2x fa-file-pdf text-danger" ng-switch-when="1"></i>
                                        <i class="far fa-2x fa-file-word text-primary" ng-switch-when="2"></i>
                                        <i class="far fa-2x fa-file-excel text-success" ng-switch-when="3"></i>
                                        <i class="far fa-2x fa-file-powerpoint text-warning" ng-switch-when="4"></i>
                                        <i class="far fa-2x fa-file text-gray-700" ng-switch-when="5"></i>
                                        <i class="far fa-2x fa-file text-gray-700" ng-switch-default></i>
                                </span>
                                <i class="fas fa-2x fa-file-video text-gray-700" ng-switch-when="video"></i>
                                <i class="fas fa-2x fa-file-audio text-gray-700" ng-switch-when="audio"></i>
                                <i class="fas fa-2x fa-file-image text-gray-700" ng-switch-when="image"></i>
                                <i class="far fa-2x fa-file-alt text-gray-700" ng-switch-when="text"></i>
                                <i class="far fa-2x fa-file-archive text-gray-700" ng-switch-when="compress"></i>
                                <i class="far fa-2x fa-file text-gray-700" ng-switch-default></i>
                            </div>
                            <div class="col-11 p-0 item-name">
                                <div class="text-truncate">{{file.name}}</div>
                                <div class="text-xs text-muted">
                                    <span ng-if="file.folder == true && file.file_size <= 1 && file.status == 1">{{file.file_size}} {{'COMMON.FILE' | translate}}</span>
                                    <span ng-if="file.folder == true && file.file_size > 1 && file.status == 1">{{file.file_size}} {{'COMMON.FILES' | translate}}</span>
                                    <span ng-if="file.folder == false">{{convertFileSize(file.file_size)}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 px-0 pb-1 d-flex align-items-center justify-content-end">
                            <button class="btn btn-sm btn-outline-info ml-1"
                                    ng-show="file.folder == false && checkSupportViewOnline(file)"
                                    ng-click="showViewOnline(file, linkAuthen.email)">
                                <i class="fa fa-eye"></i> {{'COMMON.VIEW' | translate}}
                            </button>
                            <button class="btn btn-sm btn-outline-primary ml-1"
                                    ng-click="downloadFileId(file)"
                                    ng-show="link.allowed_download_file">
                                <i class="fa fa-download"></i> {{'COMMON.DOWNLOAD' | translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mx-0 mt-4">
            <form autocomplete="off" name="replyFrm" class="col-12 " novalidate ng-submit="createReplyPath(replyFrm.$valid, replyFrm)">
                <div class="row mb-2">
                    <div class="col-6 font-weight-bold d-flex align-items-end">
                        {{'VIEW_DOWNLOAD.REPLY_TO_SENDER' | translate}}
                    </div>
                    <div class="col-6 text-right upload-page">
                        <div class="upload-wrapper flex-column flex-lg-row" style="gap: 10px;">
                            <div class="file-upload p-3">
                                <i class="fa fa-paperclip text-white mr-1" aria-hidden="true"></i>
                                <input id="fileUpload"
                                        type="file" multiple onchange="angular.element(this).scope().selectFile(event)"
                                       style="cursor: pointer"
                                       ng-disabled="isUploadingFile"/>
                                <span class="upload-label" ng-if="!isUploadingFile">{{'VIEW_DOWNLOAD.ATTACH_FILE' | translate}}</span>
                                <span class="text-white" ng-if="isUploadingFile">{{'VIEW_DOWNLOAD.UPLOADING' | translate}}</span>
                            </div>
                             <div class="file-upload p-3">
                                <i class="fa fa-paperclip text-white mr-1" aria-hidden="true"></i>
                                <input id="folderUpload"
                                       type="file" 
                                       webkitdirectory 
                                       directory 
                                       onchange="angular.element(this).scope().selectFolder(event)"
                                       style="cursor: pointer"
                                       ng-disabled="isUploadingFolder"/>
                                <span class="upload-label" ng-if="!isUploadingFolder">{{'VIEW_DOWNLOAD.SEND_DICOM' | translate}}</span>
                                <span class="text-white" ng-if="isUploadingFolder">{{'VIEW_DOWNLOAD.UPLOADING' | translate}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-4 mt-lg-0">
                    <div  ng-class="{'col-lg-6' : listReplyFile.length > 0}"
                          class="col-12">
                        <div class="col-12 mb-2 px-0">
                            <input autocomplete="off" class="form-control"
                                   name="subject"
                                   ng-class="{'is-invalid': (replyFrm.subject.$touched || replyFrm.subject.$dirty) && replyFrm.subject.$invalid}"
                                   ng-model="reply.subject"
                                   ng-pattern="script_pattern"
                                   required="true"
                                   maxlength="64"
                                   type="text"
                                   placeholder="{{'VIEW_DOWNLOAD.SUBJECT' | translate}}">
                            <div class="invalid-feedback">
                                <div ng-if="replyFrm.subject.$error.required">
                                    {{'INPUT_ERROR.REQUIRED' | translate}}
                                </div>
                                <div ng-show="replyFrm.subject.$error.pattern">
                                    {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mb-2 px-0">
                            <textarea autocomplete="off" class="form-control resize-none"
                                  name="message"
                                  ng-class="{'is-invalid': replyFrm.message.$dirty && replyFrm.message.$invalid}"
                                  rows="6"
                                  ng-pattern="script_pattern"
                                  ng-model="reply.message"
                                  maxlength="255"
                                  placeholder="{{'VIEW_DOWNLOAD.MESSAGE' | translate}}"></textarea>
                            <div class="invalid-feedback">
                                <div ng-show="replyFrm.message.$error.pattern">
                                    {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-class="{'col-lg-6' : listReplyFile.length > 0}"
                         class="col-12"
                         ng-if="listReplyFile.length > 0">
                        <div class="col-12 bg-white rounded py-3 attach-file-container">
                            <div  ng-repeat="file in listReplyFile">
                            <div class="row d-flex align-items-center py-2">
                                <div class="col-7">
                                    <div class="text-truncate" title="{{file.file.name}}">{{file.file.name}}</div>
                                </div>
                                <div class="col-3">
                                    <div>{{convertFileSize(file.file.size)}}</div>
                                </div>
                                <div class="col-2 d-flex justify-content-end">
                                    <i class="fa fa-trash cs-pointer text-danger"
                                       title="{{'MY_EMAIL.TOOLTIP_REMOVE' | translate}}"
                                       ng-click="doRemoveFileFromListReply(file.file)"></i>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row d-flex justify-content-end py-2">
                    <div class="col-4 d-flex justify-content-end">
                        <button class="btn btn-block btn-success" type="submit" ng-disabled="!replyFrm.$valid">
                            <i class="fa fa-paper-plane" aria-hidden="true"></i>
                            {{'VIEW_DOWNLOAD.SEND' | translate}}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- right panel -->
    <div class="col-12 col-sm-6 col-lg-4 text-justify bg-gradient-light">
        <!-- <div class="mb-1 text-center">
            <img class="my-1" height="auto" width="100%"
                src="images/image_download.png">
        </div>
        <h5 ng-bind-html="'VIEW_DOWNLOAD.MORE_INFO.TITLE' | translate"></h5>
        <div class="text-center mb-1">
            <a class="btn btn-block btn-warning" ui-sref="signUp" target="_blank">{{'VIEW_DOWNLOAD.MORE_INFO.TRY_IT_FOR_FREE'
                | translate}}</a>
        </div> -->
        <div ng-show="isShowFullMoreInfoContent">
            <!-- <h4 class="font-weight-bold item-content-color">{{'VIEW_DOWNLOAD.MORE_INFO.INSTRUCTIONS' | translate}}</h4> -->
            <p class="clearfix border-bottom"></p>
            <h5 class="font-weight-bold">{{'VIEW_DOWNLOAD.MORE_INFO.DOWNLOAD_AND_USE_PDF' | translate}}</h5>
            <p>
            <div ng-bind-html="'VIEW_DOWNLOAD.MORE_INFO.PARA1' | translate"></div>
            </p>
            <p class="clearfix border-bottom"></p>
            <h5 class="font-weight-bold">{{'VIEW_DOWNLOAD.MORE_INFO.DOWNLOAD_AND_USE_MS' | translate}}</h5>
            <p>
            <div ng-bind-html="'VIEW_DOWNLOAD.MORE_INFO.PARA2' | translate"></div>
            </p>
        </div>
        <p class="clearfix border-bottom"></p>
    </div>
</div>
