<link href="css/export.css?v=2.7.0-TR3" rel="stylesheet">

<div id="wb-export">

	<h1>
		{{title}}
		<span class="btn btn-link"
			uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
			popover-trigger="mouseenter"
			popover-placement="bottom-right"
			popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
	</h1>


    <div class="ot-loader ot-main-loader" onto-loader size="50" ng-show="loader"></div>
    <div class="ot-owlim-ctrl" ng-hide="loader">
        <div core-errors></div>
        <div ng-show="getActiveRepository()">

			<div class="alert alert-warning" ng-hide="graphs.length > 0">
				{{'export.no.graphs.in.repo' | translate}} <a ng-href="sparql">{{'export.sparql.update.form' | translate}}</a> {{'or' | translate}} <a ng-href="import">{{'export.data.import.page' | translate}}</a>.
			</div>

			<div>
				<div class="clearfix mb-2">
					<div class="pull-right col-form-label">
						<span class="mr-1">{{'showing.label' | translate}} {{(pageSize * (page - 1)) + 1}} - {{pageSize * page >= filteredGraphs.length ? filteredGraphs.length : pageSize * page}} {{'of' | translate}} {{filteredGraphs.length}} {{'results.label' | translate}}</span>
						<span>{{'export.graphs.per.page' | translate}}</span>
						<div class="btn-group" uib-dropdown>
							<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" uib-dropdown-toggle
									ng-disabled="disabled">
								<span ng-if="filteredGraphs.length > pageSize">{{pageSize}} </span>
								<span ng-if="filteredGraphs.length <= pageSize">All </span>
							</button>
							<ul class="dropdown-menu small">
								<li ng-repeat="size in pageSizeOptions track by $index" ng-if="size <= filteredGraphs.length">
									<span class="dropdown-item" ng-click="changePageSize(size)">{{size}}</span>
								</li>
								<li>
									<span class="dropdown-item" ng-click="changePageSize(filteredGraphs.length)">{{'all.label' | translate}}</span>
								</li>
							</ul>
						</div>
					</div>

					<label class="mr-1 mb-0">
						<input type="text" class="form-control search-graphs" ng-model="exportFilter" ng-keyup="onGraphSearch()"
							placeholder="{{'search.graphs.label' | translate}}"/>
					</label>
				</div>

				<div class="clearfix mb-2">
					<button type="button" class="btn btn-secondary clear-repository-btn"
							ng-click="dropRepository()"
							gdb-tooltip="{{'removes.data.from.repo.label' | translate}}" tooltip-placement="top"
							ng-disabled="!canWriteActiveRepo(true)">
						<span class="icon-trash"></span> {{'clear.repo.label' | translate}}
					</button>
                    <div class="btn-group" uib-dropdown>
                        <button type="button" class="btn btn-primary dropdown-toggle export-repository-btn" uib-dropdown-toggle>
                            <span class="icon-export"></span> {{'export.repository.label' | translate}}
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="format in exportFormats" class="export-repo-format-JSONLD"
                                ng-if="format.name === 'JSON-LD';"
                                ng-click="openJSONLDExportSettings(format, false, false);">
                                <span class="dropdown-item">{{format.name}}</span>
                            </li>
                            <li ng-repeat="format in exportFormats" class="export-repo-format-{{format.name}}"
                                ng-if="format.name !== 'JSON-LD';"
                                ng-click="exportRepo(format, false);">
                                <span class="dropdown-item">{{format.name}}</span>
                            </li>
                        </ul>
                    </div>
					<div class="pull-right">
						<div ng-show="pageSize >= filteredGraphs.length"></div>
                        <div paginations ng-hide="pageSize >= filteredGraphs.length"
                             class="ot-export-pagination top-pagination"></div>
                    </div>
				</div>

                <div class="mb-2">
					<div ng-hide="displayGraphs.length > 0">
						<em>{{'no.results.found.label' | translate}}</em>
					</div>
					<table ng-show="displayGraphs.length > 0" class="table table-striped table-hover" id="export-graphs"
                           aria-describedby="Export graphs table">
						<thead>
							<tr>
								<th id="selectionColumn" class="text-nowrap" style="width: 100px">
									<label class="form-check-label" gdb-tooltip="{{'select.all.tooltip' | translate}}">
										<input class="form-check-input" type="checkbox" ng-model="selectedAll" ng-click="checkAll()">
									</label>
									<div class="btn-group btn-group-sm" uib-dropdown>
										<!-- Keep the closing button tag right after the closing span tag, otherwise
											 an extra space is rendered in HTML -->
										<button type="button" class="btn btn-link dropdown-toggle" uib-dropdown-toggle gdb-tooltip="{{'export.selected.graphs.tooltip' | translate}}" ng-disabled="!hasMultipleSelected()">
											<span class="icon-export"></span></button>
										<ul class="dropdown-menu" role="menu">
                                            <li ng-repeat="format in exportFormats" class="export-repo-format-{{format.name}}"
                                                ng-if="format.name === 'JSON-LD';"
                                                ng-click="openJSONLDExportSettingsForSelectedGraphs(format);">
                                                <span class="dropdown-item">{{format.name}}</span>
                                            </li>
											<li ng-repeat="format in exportFormats"
                                                ng-if="format.name !== 'JSON-LD';"
												ng-click="exportSelectedGraphs(format)">
												<span class="dropdown-item">{{format.name}}</span>
											</li>
										</ul>
									</div>
									<button type="button" class="btn btn-link secondary"
										ng-click="dropContext()"
											gdb-tooltip="{{'remove.data.from.selected.graph.tooltip' | translate}}" tooltip-placement="top"
										ng-disabled="!canWriteActiveRepo(true) || !hasMultipleSelected()">
										<span class="fa fa-trash-o"></span>
									</button>
								</th>
								<th id="graphColumn">{{'graphs.label' | translate}}</th>
								<th id="actionsColumn" style="width: 150px"></th>
							</tr>
						</thead>
						<tbody>
						<tr ng-repeat="graph in displayGraphs track by $index">
							<td>
								<label class="form-check-label">
									<input type="checkbox"
										ng-model="selectedGraphs.exportGraphs[graph.contextID.value]"
                                        ng-disabled="!graph.contextID.uri"
                                        class="form-check-input"/>
								</label>
							</td>
                            <td ng-if="graph.contextID.uri && isShacl(graph.contextID.uri)">
                                <a ng-href="resource?uri={{graph.contextID.uri}}&role=context"
                                   title="{{graph.contextID.value}}">{{'shacl.shape.graph.tooltip' | translate}} ({{graph.contextID.value}})</a>
                            </td>
                            <td ng-if="graph.contextID.uri && !isShacl(graph.contextID.uri)" >
                                <a ng-href="resource?uri={{graph.contextID.uri}}&role=context" title="{{graph.contextID.value}}">{{graph.contextID.value | translate}}</a>
							</td>
							<td ng-if="!graph.contextID.uri">
								{{graph.contextID.value}}
							</td>
							<td>

								<div class="btn-group" uib-dropdown>
									<!-- Keep the closing button tag right after the closing span tag, otherwise
										 an extra space is rendered in HTML -->
									<button type="button" class="btn btn-link dropdown-toggle" uib-dropdown-toggle gdb-tooltip="{{'export.graph.label' | translate}}"
											ng-disabled="!graph.contextID.uri">
										<span class="icon-export"></span></button>
									<ul class="dropdown-menu" role="menu">
                                        <li ng-repeat="format in exportFormats" class="export-repo-format-{{format.name}}"
                                            ng-if="format.name === 'JSON-LD';"
                                            ng-click="openJSONLDExportSettings(format, graph.contextID, false);">
                                            <span class="dropdown-item">{{format.name}}</span>
                                        </li>
										<li ng-repeat="format in exportFormats"
                                            ng-if="format.name !== 'JSON-LD';"
											ng-click="exportRepo(format, graph.contextID);">
											<span class="dropdown-item">{{format.name}}</span>
										</li>
									</ul>
								</div>

								<button class="btn btn-link secondary delete-graph-btn"
										ng-click="dropContext(graph)"
										gdb-tooltip="{{'remove.data.from.this.graph.tooltip' | translate}}" tooltip-placement="top"
										ng-disabled="!canWriteActiveRepo(true) || !graph.contextID.uri">
									<span class="fa fa-trash-o fa-lg"></span>
								</button>

							</td>
						</tr>
						</tbody>
					</table>
                </div>
                <div paginations ng-hide="pageSize >= filteredGraphs.length" class="ot-export-pagination pull-right bottom-pagination"></div>
            </div>
        </div>
    </div>
</div>

