<link rel="stylesheet" type="text/css" href="css/import.css?v=3.4.0-RC3">
<link rel="stylesheet" type="text/css" href="css/import-resource-tree.css?v=3.4.0-RC3">

<div id="wb-import">
    <h1>
        {{title}}
        <page-info-tooltip></page-info-tooltip>
    </h1>

    <div core-errors write ontop></div>

    <div ng-controller="TabController" ng-if="!isRestricted && canWriteActiveRepo()">

        <ul class="nav nav-tabs mb-2">
            <li class="nav-item" id="wb-import-tabUpload">
                <a id="userTab" class="nav-link" ng-class="activeTabId == 'user' ? 'active' : ''" href ng-click="openTab('user')"
                   data-toggle="tab">{{'user.data' | translate}}</a>
            </li>
            <li class="nav-item" id="wb-import-tabServer" ng-hide="isS4()">
                <a id="serverTab" class="nav-link" ng-class="activeTabId == 'server' ? 'active' : ''" href
                   ng-click="openTab('server')" data-toggle="tab">{{'server.files' | translate}}</a>
            </li>
            <li class="nav-item">
                <button type="button" ng-click="toggleHelp()"
                        gdb-tooltip="{{'import.help.buttons.toggle_help.tooltip' | translate}}"
                        class="btn btn-link toggle-help-btn pull-right">
                    <span class="ri-question-line text-tertiary"></span>
                </button>
            </li>
        </ul>

        <div class="tab-content">
            <div id="import-user" ng-if="TAB_IDS.USER === activeTabId" class="tab-pane" ng-controller="UploadCtrl"
                 ng-class="activeTabId == 'user' ? 'active' : ''">

                <div class="progress" ng-if="uploadProgressMessage">
                    <div class="progress-bar progress-bar-success" role="progressbar" style="width:{{progressPercentage}}%">
                        {{uploadProgressMessage}}
                    </div>
                </div>

                <div class="row upload-buttons">
                    <div class="col-xs-12 col-md-6 col-lg-4 mb-2 fat-btn">
                        <div class="btn btn-secondary btn-lg text-xs-left upload-rdf-files-btn"
                             uib-popover="{{'supported.import.formats.label' | translate}} {{fileFormatsHuman}}"
                             popover-trigger="mouseenter"
                             popover-placement="bottom"
                             guide-selector="uploadRdfFileButton">
                            <div id="wb-import-uploadFile" class="pointer clearfix"
                               accept="{{fileFormatsExtended}}"
                               ngf-multiple="true"
                               ngf-select
                               ngf-keep="false"
                               ngf-change="fileSelected($files, $file, $newFiles, $duplicateFiles, $invalidFiles)"
                               ngf-max-size="maxUploadFileSizeBytes">
                                <div class="grid-container">
                                    <em class="ri-upload-2-line icon-lg"></em>
                                    <!-- Keep this a label, it points to the input element created by ngFileUpload
                                         and makes cypress happy -->
                                    <label for="ngf-wb-import-uploadFile" class="text m-0">
                                        <div>{{'upload.rdf.files.label' | translate}}</div>
                                        <small
                                            class="text-muted">{{'all.rdf.formats.label' | translate}}{{'up.to' | translate}}
                                            {{maxUploadFileSizeBytes | bytes}}
                                        </small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-6 col-lg-4 mb-2 fat-btn">
                        <div class="btn btn-secondary btn-lg text-xs-left import-from-url-btn"
                             role="button" ng-click="rdfDataFromURL()"
                             uib-popover="{{'supported.import.formats.label' | translate}} {{fileFormatsHuman}}"
                             popover-trigger="mouseenter"
                             popover-placement="bottom">
                            <div class="grid-container">
                                <em class="ri-links-line icon-lg"></em>
                                <div class="text">
                                    <span>{{'rdf.data.from.url.label' | translate}}</span>
                                    <small class="text-muted">{{'all.rdf.formats.label' | translate}}</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-6 col-lg-4 mb-2 fat-btn">
                        <div class="btn btn-secondary btn-lg text-xs-left import-rdf-snippet-btn"
                             role="button" ng-click="openTextSnippetDialog()"
                             uib-popover="{{'supported.import.formats.label' | translate}} {{textFileFormatsHuman}}"
                             popover-trigger="mouseenter"
                             popover-placement="bottom">
                            <div class="grid-container">
                                <em class="icon-sparql icon-lg"></em>
                                <div class="text">
                                    <div>{{'import.rdf.text.snippet.label' | translate}}</div>
                                    <small class="text-muted">{{'type.paste.data.label' | translate}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div uib-collapse="false" class="alert alert-warning file-size-limit-warning mb-0">
                    <div ng-include="fileSizeLimitInfoTemplateUrl"></div>
                </div>

                <div ng-if="isHelpVisible" class="alert alert-help user-data-import-help mt-2">
                    <button type="button" ng-click="toggleHelp()" gdb-tooltip="{{'common.close' | translate}}"
                            class="close"
                            aria-label="Close"></button>
                    <div class="ot-view-info">
                        <h4>{{'import.help.on_upload.import_user_data' | translate}}</h4>
                        <p>
                            {{'import.help.on_upload.file_size_limit_can_be_changed' | translate}}
                            <strong class="file-size-prop copyable">graphdb.workbench.maxUploadSize</strong>
                            <copy-to-clipboard tooltip-text="import.help.buttons.copy_file_size_prop.tooltip"></copy-to-clipboard>
                            {{'import.help.on_upload.the_property' | translate}}.
                        </p>
                        <h5>{{'import.help.on_upload.execution' | translate}}</h5>
                        <ul>
                            <li>{{'import.help.on_upload.work_in_background' | translate}}</li>
                            <li>{{'import.help.on_upload.to_reimport_again' | translate}}</li>
                            <li>{{'import.help.on_upload.interrupt_support' | translate}}</li>
                        </ul>
                    </div>
                </div>
                <import-resource-tree column-keys="columnKeys"
                                      show-type-filter="false"
                                      sort-by="SORTING_TYPES.MODIFIED"
                                      asc="false"
                                      on-import="onImport(resource)"
                                      on-remove="onRemove(resources)"
                                      on-stop-import="onStopImport(resource)"
                                      on-reset="onReset(resources)"
                                      on-import-all="importAll(selectedResources, withoutChangingSettings)"
                                      on-edit-resource="onEditResource(resource)">
                </import-resource-tree>
            </div>
            <div id="import-server" ng-if="TAB_IDS.SERVER === activeTabId" ng-hide="isS4()" class="tab-pane" ng-controller="ImportCtrl"
                 ng-class="activeTabId == 'server' ? 'active' : ''">

                <div ng-if="isHelpVisible" class="alert alert-help server-files-import-help mb-0">
                    <button type="button" ng-click="toggleHelp()" gdb-tooltip="{{'common.close' | translate}}"
                            class="close" aria-label="Close"></button>
                    <div class="ot-view-info">
                        <h4>{{'import.help.on_server_import.import_from_server' | translate}}</h4>
                        <p>
                            {{'import.help.on_server_import.open_directory' | translate}}
                            <strong>{{appData.properties['graphdb.workbench.importDirectory'].value}}</strong>
                            {{'import.help.on_server_import.put_files_into' | translate}}<br><br>
                            {{'import.help.on_server_import.directory_can_be_changed' | translate}}
                            <strong class="server-import-directory-prop copyable">graphdb.workbench.importDirectory</strong>
                            <copy-to-clipboard tooltip-text="import.help.buttons.copy_import_directory_prop.tooltip"></copy-to-clipboard>
                            {{'import.help.on_server_import.the_property' | translate}}.
                        </p>
                        <h5>{{'import.help.on_server_import.execution' | translate}}</h5>
                        <ul>
                            <li>{{'import.help.on_server_import.work_in_background' | translate}}</li>
                            <li>{{'import.help.on_server_import.to_reimport_again' | translate}}</li>
                            <li>{{'import.help.on_server_import.interrupt_support' | translate}}</li>
                        </ul>
                    </div>
                </div>
                <import-resource-tree column-keys="columnKeys"
                                      show-type-filter="true"
                                      sort-by="SORTING_TYPES.NAME"
                                      on-import="onImport(resource)"
                                      on-stop-import="onStopImport(resource)"
                                      on-reset="onReset(resources)"
                                      on-import-all="importAll(selectedResources, withoutChangingSettings)">
                </import-resource-tree>
            </div>
        </div>
    </div>
</div>
