<link href="css/graphql/graphql-endpoint-management.css?v=3.4.0-RC3" rel="stylesheet"/>

<div class="graphql-endpoint-management-view">
    <h1 id="title-container">
        <span id="graphql-endpoint-management-title-label">{{title}}</span>
        <page-info-tooltip></page-info-tooltip>
    </h1>

    <div core-errors></div>

    <div onto-loader
         ng-show="loadingEndpointsInfo"
         class="graphql-endpoint-management-page-loader"
         size="100">
    </div>

    <div ng-if="!isSelectedRepositoryLocal && getActiveRepository()" class="warnings unexpected-remote-repository-warning">
        <div class="alert alert-warning">{{'graphql.endpoints_management.warnings.unexpected_remote_repository' | translate}}</div>
    </div>

    <div ng-if="isSelectedRepositoryLocal && getActiveRepository() && !loadingEndpointsInfo" class="endpoint-management-container">

        <div class="toolbar">
            <div class="endpoints-filter">
                <input type="text" ng-if="hasEndpoints" class="form-control endpoints-filter-field"
                       placeholder="{{'graphql.endpoints_management.toolbar.endpoints_filter.placeholder' | translate}}"
                       ng-model="filterTerm" ng-change="onEndpointsFilter(filterTerm)" aria-label="Filter endpoints"
                       autocomplete="off">
            </div>

            <div class="actions">
                <button class="btn btn-primary create-endpoint-btn" ng-click="startCreateEndpointWizard()"
                        gdb-tooltip="{{'graphql.endpoints_management.toolbar.create_endpoint.tooltip' | translate}}">
                    <span class="icon-graphql"></span>&nbsp;
                    <span>{{'graphql.endpoints_management.toolbar.create_endpoint.label' | translate}}</span>
                </button>
                <button class="btn btn-secondary import-schema-definition-btn ml-1" ng-click="importSchema()"
                        gdb-tooltip="{{'graphql.endpoints_management.toolbar.import_schema.tooltip' | translate}}">
                    <span class="ri-upload-2-line"></span>&nbsp;
                    <span>{{'graphql.endpoints_management.toolbar.import_schema.label' | translate}}</span>
                </button>
            </div>
        </div>

        <div ng-if="!hasEndpoints" class="alert alert-info no-endpoints mt-2">
            <span>{{'graphql.endpoints_management.table.messages.no_endpoints_in_repository' | translate}}</span>
        </div>

        <table ng-if="hasEndpoints" class="endpoints-info-table table mt-1"
               aria-describedby="GraphQL endpoints info table">
            <thead>
            <tr>
                <th scope="col" class="toggle-col"></th>
                <th scope="col" class="status-col"></th>
                <th scope="col" class="endpoint-id-col">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.id.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.id.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-label-col">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.label.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.label.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-is-default-col text-center">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.is_default.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.is_default.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-is-active-col text-center">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.is_active.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.is_active.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-modified-on-col">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.modified_on.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.modified_on.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-types-count-col numeric">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.types_count.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.types_count.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-props-count-col numeric">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.props_count.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.props_count.label' | translate}}
                    </span>
                </th>
                <th scope="col" class="endpoint-actions-col">
                    <span gdb-tooltip="{{'graphql.endpoints_management.table.column.actions.tooltip' | translate}}">
                        {{'graphql.endpoints_management.table.column.actions.label' | translate}}
                    </span>
                </th>
            </tr>
            </thead>

            <tr ng-if="operationInProgress" class="overlay-row">
                <td colspan="9">
                    <div class="endpoint-operation-progress" onto-loader size="100"></div>
                </td>
            </tr>

            <tbody>
            <tr ng-repeat-start="endpoint in endpointsInfoList.endpoints track by endpoint.endpointId">
                <td class="toggle-row">
                    <a href="#" ng-click="toggleRow($event, $index)">
                        <i class="ri-arrow-right-s-line" ng-if="expandedRow !== $index"></i>
                        <i class="ri-arrow-down-s-line" ng-if="expandedRow === $index"></i>
                    </a>
                </td>
                <td class="status-cell">
                    <a href="#"
                       ng-click="onShowEndpointReport(endpoint)"
                       gdb-tooltip="{{'graphql.endpoints_management.table.actions.view_report.tooltip' | translate}}"
                       class="endpoint-report-link btn btn-link">
                        <i ng-if="!endpoint.createdSuccessfully" class="ri-close-circle-line status-failed"></i>
                        <i ng-if="endpoint.createdSuccessfully" class="ri-checkbox-circle-line status-success"></i>
                    </a>
                </td>
                <td>
                    <span ng-if="!endpoint.active"
                          gdb-tooltip="{{'graphql.endpoints_management.table.actions.explore_endpoint.inactive.tooltip' | translate}}"
                          class="endpoint-id">{{endpoint.endpointId}}</span>
                    <a ng-if="endpoint.active" href="#" ng-click="onExploreEndpoint(endpoint)"
                       gdb-tooltip="{{'graphql.endpoints_management.table.actions.explore_endpoint.active.tooltip' | translate}}"
                       class="endpoint-link">{{endpoint.endpointId}}</a>
                </td>
                <td>{{endpoint.label}}</td>
                <td class="default-endpoint-selector">
                    <label class="endpoint-default-state">
                        <input type="radio" ng-model="selectedDefaultEndpoint.default" ng-value="endpoint.default"
                               ng-disabled="!endpoint.createdSuccessfully"
                               ng-change="setEndpointAsDefault(endpoint)"/>
                    </label>
                </td>
                <td class="active-endpoint-selector">
                    <span ng-click="!endpoint.createdSuccessfully || toggleEndpointActiveState(endpoint)"
                          class="toggle-active-state">
                        <input type="checkbox" class="switch" ng-checked="endpoint.active"
                               ng-disabled="!endpoint.createdSuccessfully"/>
                        <label></label>
                    </span>
                </td>
                <td title="{{endpoint.lastModified}}">{{endpoint.lastModified | date: 'yyyy-MM-dd'}}</td>
                <td class="objects-count numeric">{{endpoint.objectsCount}}</td>
                <td class="properties-count numeric">{{endpoint.propertiesCount}}</td>
                <td class="endpoint-actions">
                    <div class="btn-group">
                        <button class="btn btn-link secondary btn-sm open-endpoint-actions-btn"
                                data-toggle="dropdown" aria-expanded="false"
                                ng-if="true"
                                ng-disabled="false">
                            <i class="ri-more-line"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right endpoint-actions-menu">
                            <button class="dropdown-item export-schema-btn" type="button"
                                    ng-click="onExportSchema(endpoint)">
                                <i class="ri-download-2-line"></i>&nbsp;
                                <span>{{'graphql.endpoints_management.table.actions.export_schema.label' | translate}}</span>
                            </button>
                            <button class="dropdown-item configure-endpoint-btn" type="button"
                                    ng-click="onConfigureEndpoint(endpoint)">
                                <i class="ri-settings-3-line"></i>&nbsp;
                                <span>{{'graphql.endpoints_management.table.actions.configure_endpoint.label' | translate}}</span>
                            </button>
                            <div class="dropdown-divider"></div>
                            <button class="dropdown-item delete-endpoint-btn" type="button"
                                    ng-click="onDeleteEndpoint(endpoint)">
                                <i class="ri-delete-bin-6-line"></i>&nbsp;
                                <span>{{'graphql.endpoints_management.table.actions.delete_endpoint.label' | translate}}</span>
                            </button>
                        </div>
                    </div>
                </td>
            </tr>
            <tr ng-repeat-end ng-if="expandedRow === $index" class="endpoint-description-row">
                <td></td>
                <td colspan="8">
                    <strong>{{'graphql.endpoints_management.table.labels.description' | translate}}</strong>
                    <div class="endpoint-description">{{endpoint.description}}</div>
                </td>
            </tr>
            <tr ng-if="endpointsInfoList.endpoints.length === 0" class="no-results">
                <td colspan="9">
                    <div class="alert alert-info">
                        <span>{{'graphql.endpoints_management.table.messages.endpoints_filter_no_result' | translate}}</span>
                    </div>
            </tr>
            </tbody>
        </table>
    </div>
</div>



