<link href="css/graphql/endpoint-generation-failure-result-modal.css?v=3.4.0-RC3" rel="stylesheet"/>

<div class="modal-header">
    <button type="button" class="close" ng-click="close()"></button>
    <h3 class="modal-title">
        {{'graphql.endpoints_management.generation_failure_report_modal.title' | translate}}</h3>
</div>

<div class="modal-body endpoint-generation-failure-result-modal-body">
    <div ng-if="endpointReport.errors > 0" class="alert alert-danger">
        {{'graphql.endpoints_management.generation_failure_report_modal.failing_reason_message' | translate}}
    </div>

    <div ng-if="endpointReport.warnings > 0 && endpointReport.errors === 0" class="alert alert-info">
        {{'graphql.endpoints_management.generation_failure_report_modal.warning_reason_message' | translate}}
    </div>

    <table class="report table table-bordered" aria-label="Endpoint generation failure report table">
        <thead>
        <tr class="labels-row">
            <th scope="col">
                <strong
                    class="errors-count mr-2">{{'graphql.endpoints_management.generation_failure_report_modal.errors' |
                translate: {errorCount: endpointReport.errors} }}</strong>
                <strong
                    class="warnings-count">{{'graphql.endpoints_management.generation_failure_report_modal.warnings' |
                translate: {warningCount: endpointReport.warnings} }}</strong>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="error in endpointReport.messages.errors" class="error-row">
            <td>
                <div class="alert alert-danger">{{error}}</div>
            </td>
        </tr>
        <tr ng-repeat="warning in endpointReport.messages.warnings" class="warning-row">
            <td>
                <div class="alert alert-warning">{{warning}}</div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="modal-footer mt-0">
    <button id="download-failure-report" class="btn btn-secondary mr-1" ng-click="downloadReport()">
        <i class="ri-download-2-line"></i>
        <span>{{'graphql.endpoints_management.generation_failure_report_modal.actions.download_report.label' | translate}}</span>
    </button>
    <button ng-if="endpointReport.errors === 0 && endpointReport.warnings > 0" id="delete-warnings"
            class="btn btn-primary" ng-click="deleteReport()">
        <span>{{'graphql.endpoints_management.generation_failure_report_modal.actions.delete_report.label' | translate}}</span>
    </button>
</div>
