<link href="css/lib/angular-xeditable/xeditable.min.css?v=3.4.0-RC3" rel="stylesheet">
<link href="css/export.css?v=3.4.0-RC3" rel="stylesheet">

<title>Namespaces</title>

<h1>
    {{title}}
    <page-info-tooltip></page-info-tooltip>
</h1>


<div onto-loader size="50" ng-show="loader"></div>
<div id="wb-namespaces" ng-hide="loader" data-test="namespaces-page">
    <div core-errors></div>
    <div ng-show="getActiveRepository()" data-test="namespaces-content">
        <div class="clearfix mb-2">
            <form novalidate name="form" class="form-inline pull-right add-namespace-form" ng-show="canWriteActiveRepo()">
                <div class="form-group" style="width: 130px;">
                    <input id="wb-namespaces-prefix"
                           type="text" ng-model="namespace.prefix" placeholder="examplePrefix"
                           class="form-control" gdb-tooltip="{{'prefix.label' | translate}}" style="width: 130px;"/>
                </div>
                <div class="form-group" style="width: 260px;">
                    <input required id="wb-namespaces-namespace" name="namespace"
                           ng-model="namespace.namespace"
                           placeholder="http://example.com/data#" class="form-control"
                           gdb-tooltip="{{'namespace.label' | translate}}" style="width: 260px;"/>
                </div>
                <button id="wb-namespaces-addNamespace" type="submit" ng-click="addNamespace()"
                        class="btn btn-primary add-namespace"
                        gdb-tooltip="{{'add.namespace.label' | translate}}">
                    <span class="ri-add-circle-line"></span>
                    {{'add.namespace.label' | translate}}
                </button>
            </form>
        </div>
        <div ng-show="displayedNamespaces.length > 0" class="clearfix">
            <div class="btn-group pull-right namespaces-per-page-menu" uib-dropdown>
                <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" uib-dropdown-toggle
                        ng-disabled="disabled" data-cy="namespaces-per-page-menu">
                    <span ng-if="pageSizeOptions.indexOf(displayedNamespaces.length) > -1">{{pageSize}}</span>
                    <span ng-if="pageSizeOptions.indexOf(displayedNamespaces.length) === -1">{{'all.label' | translate}}</span>
                </button>
                <ul class="dropdown-menu small">
                    <li ng-repeat="size in pageSizeOptions" ng-if="size < matchedElements.length">
                        <span class="dropdown-item page-size-option" ng-click="changePageSize(size)">{{size}}</span>
                    </li>
                    <li>
                        <span class="dropdown-item page-size-option" ng-click="changePageSize(namespaces.length)" data-cy="all-label">{{'all.label' | translate}}</span>
                    </li>
                </ul>
            </div>
            <span class="pull-right mr-1">{{'namespaces.per.page.label' | translate}}</span>
        </div>
        <div ng-show="namespaces.length > 0" class="ot-owlim-ctrl clearfix namespaces-result-header">
            <span class="pull-left">
                <input type="text" class="form-control namespaces-filter" placeholder="{{'search.namespaces.label' | translate}}"
                       ng-model="searchNamespaces" gdb-tooltip="{{'common.search.btn' | translate}}"
                       ng-change="onNamespaceSearch()">
            </span>
            <div paginations class="ot-export-pagination pull-right namespaces-header-pagination"></div>
            <span class="showing-info-namespaces pull-right">
                {{'showing.label' | translate}} {{(pageSize * (page - 1)) + 1}} - {{pageSize * page >= displayedNamespaces.length ? displayedNamespaces.length + (pageSize * (page - 1)) : pageSize * page}} {{'view.namespaces.pagination.of' | translate}} {{matchedElements.length}} {{'results.label' | translate}}</span>
        </div>
        <table ng-show="displayedNamespaces.length > 0" id="wb-namespaces-namespaceInNamespaces"
               class="table table-striped table-hover" aria-describedby="Namespaces table">
            <thead>
            <tr>
                <th id="selectionColumn" style="width: 100px">
                    <label class="form-check-label">
                        <input class="form-check-input select-all-namespaces" type="checkbox" ng-model="selectedAll"
                               ng-click="checkAll();checkIfSelectedNamespace()" ng-disabled="!canWriteActiveRepo()">
                    </label>
                    <button type="button" class="btn btn-link btn-sm secondary p-0 delete-namespaces-btn" ng-click="deleteSelected()"
                            ng-disabled="!canWriteActiveRepo() || !haveSelected"
                            gdb-tooltip="{{'delete.selected' | translate}}" data-cy="delete-several-prefixes"><span class="ri-delete-bin-6-line"></span></button>
                </th>
                <th id="prefixColumn" style="width: 20%">{{'prefix.label' | translate}}</th>
                <th id="uriColumn">{{'iri.label' | translate}}</th>
                <th id="actionsColumn" style="width: 100px"></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="namespace in displayedNamespaces | orderBy: 'prefix'"
                class="wb-namespaces-row namespace" loader-post-repeat-directive>
                <td>
                    <label class="form-check-label">
                        <input class="form-check-input select-namespace" type="checkbox" ng-model="namespace.selected"
                               ng-disabled="!canWriteActiveRepo()" ng-click="checkIfSelectedNamespace()">
                    </label>
                </td>
                <td>
						<span editable-text="namespace.prefix" e-name="prefix" e-form="rowform" e-required
                              class="ot-edit-namespace namespace-prefix">
						{{namespace.prefix}} :
						</span>
                </td>

                <td>
						<span editable-url="namespace.namespace" e-name="namespace" e-form="rowform" e-required
                              class="ot-edit-namespace namespaceURI">
							{{namespace.namespace}}
						</span>

                    <form editable-form name="rowform"
                          onbeforesave="editPrefixAndNamespace($data.prefix, $data.namespace, namespace)"
                          ng-show="rowform.$visible" class="d-inline-block"
                          shown="inserted === namespace">
                        <button type="submit" class="btn btn-primary" ng-disabled="rowform.$waiting"
                                gdb-tooltip="{{'common.save.btn' | translate}}"><span class="ri-save-line"></span></button>
                        <button type="button" class="btn btn-secondary" ng-disabled="rowform.$waiting"
                                ng-click="rowform.$cancel()" gdb-tooltip="{{'common.cancel.btn' | translate}}"><span
                                class="ri-close-line"></span></button>
                    </form>
                </td>
                <td class="actions-bar"><!--ng-show="!rowform.$visible && canWriteActiveRepo()"-->
                    <button class="btn btn-link edit-namespace-btn" ng-click="rowform.$show()"
                            ng-disabled="!canWriteActiveRepo()"
                            gdb-tooltip="{{'edit.namespace' | translate}}"><span class="ri-edit-line"></span></button>
                    <button class="btn btn-link secondary delete-namespace-btn" ng-click="removeNamespace(namespace)"
                            ng-disabled="!canWriteActiveRepo()" gdb-tooltip="{{'delete.namespace' | translate}}"
                            data-cy="{{'delete-pref_' + namespace.prefix}}">
                        <span class="ri-delete-bin-6-line"></span></button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="alert alert-info no-namespaces-match-alert" ng-show="displayedNamespaces.length === 0 && namespaces.length > 0">
            <p>{{'no.namespaces.match.filter' | translate}}</p>
        </div>
        <div class="alert alert-warning no-namespaces-alert" ng-show="namespaces.length === 0">
            <p>{{'no.namespaces.in.repo' | translate}}</p>
        </div>
        <div ng-show="displayedNamespaces.length > 0" class="ot-owlim-ctrl clearfix namespaces-pagination">
            <div paginations class="ot-export-pagination pull-right"></div>
        </div>
    </div>
</div>
