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

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

    <div class="core-errors-container" core-errors write></div>

    <div class="create-graphql-endpoint-container">
        <div ng-if="!isSelectedRepositoryLocal" class="warnings unexpected-remote-repository-warning">
            <div class="alert alert-warning">{{'graphql.create_endpoint.warnings.unexpected_remote_repository' | translate}}</div>
        </div>

        <div class="content" ng-if="selectedSourceRepository">
            <div class="toolbar">
                <div class="form-inline">
                    <label
                        for="sourceRepositorySelector">{{'graphql.create_endpoint.toolbar.source_repository_selector.label' | translate}}</label>
                    <select id="sourceRepositorySelector" ng-model="selectedSourceRepository"
                            ng-options="repository as repository.label for repository in sourceRepositories"
                            ng-change="onSelectedSourceRepositoryChange(selectedSourceRepository)"
                            ng-disabled="generatingEndpoint"
                            class="form-control source-repository-selector"
                            gdb-tooltip="{{'graphql.create_endpoint.toolbar.source_repository_selector.tooltip' | translate}}"
                            tooltip-placement="top">
                    </select>
                </div>
            </div>

            <div class="wizard-container mt-2">
                <div class="wizard">
                    <div class="wizard-steps">
                        <div ng-repeat="step in wizardModel.steps" ng-click="onStepClick(step); $event.preventDefault()"
                             class="wizard-step" ng-class="{active: step.active, completed: step.visited}">
                            <span class="step-title">{{'graphql.create_endpoint.wizard_steps.' + step.id + '.title' | translate}}</span>
                            <span class="ri-arrow-right-s-line step-decoration"></span>
                        </div>
                    </div>

                    <div class="wizard-content">
                        <div ng-repeat="step in wizardModel.steps" ng-if="step.active" class="wizard-step-content">
                            <div ng-switch="step.id">
                                <div ng-switch-when="select_schema_sources">
                                    <select-schema-sources step-definition="step"></select-schema-sources>
                                </div>
                                <div ng-switch-when="configure_endpoint">
                                    <configure-endpoint step-definition="step"
                                                        selected-source-repository="selectedSourceRepository.data.repository"></configure-endpoint>
                                </div>
                                <div ng-switch-when="generate_endpoint">
                                    <generate-endpoint step-definition="step"></generate-endpoint>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
