@if (resourceType && resourceType !== 'Topologies' && resourceType !== 'Service Definitions') {
<div class="panel panel-default" style="margin-top: 10px;">
    <div class="panel-heading">
        <h4 class="panel-title">
            {{ getTitleSubject() }} Detail
            @if (showEditOptions() === false) {
                <span style="padding-left: 15%;" class="text-danger text-center"> Read Only (generated file) </span>
            }
            @if (hasSelectedResource()) {
                <span class="pull-right">{{resourceService.getResourceDisplayName(resource)}}</span>
            }
        </h4>
    </div>

    <!-- Provider Configuration Details -->
    @if (hasSelectedResource() && resourceType === 'Provider Configurations') {
    <div class="panel-body">
        @if (referencedProviderConfigError) {
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"
                        (click)="referencedProviderConfigError=false">
                    <span aria-hidden="true">&times;</span>
                </button>
                Cannot remove <strong>{{resourceService.getResourceDisplayName(resource)}}</strong>
                because it is referenced by one or more descriptors
            </div>
        }
        <div style="padding-bottom: 10px">
            <span><strong>Providers</strong></span>
            @if (!isAddingProvider) {
                <span class="clickable inline-glyph btn btn-xs pull-right"
                      (click)="isAddingProvider=true"
                      data-toggle="tooltip" title="Add Provider"><span class="material-icons">add_circle</span></span>
            }
            @if (isAddingProvider) {
                <span class="inline-editor inlineEditForm pull-right">
                    <input type="text" value="name" onClick="this.setSelectionRange(0, this.value.length)"
                           #newProviderName>
                    <input type="text" value="role" onClick="this.setSelectionRange(0, this.value.length)"
                           #newProviderRole>
                    <button class="btn btn-xs"
                            (click)="isAddingProvider=false;
                                     addProvider(newProviderName.value, newProviderRole.value)">
                      <span class="material-icons">check</span>
                    </button>
                    <button class="btn btn-xs" (click)="isAddingProvider=false">
                      <span class="material-icons">close</span>
                    </button>
                </span>
            }
        </div>
        @for (provider of providers; track provider.name) {
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span>&nbsp;</span>
                    <span class="clickable inline-glyph material-icons"
                          (click)="toggleShowProvider(provider)">{{isShowProvider(provider) ? 'expand_more' : 'chevron_right'}}</span>
                    <span><strong>{{ provider.role }}</strong></span>
                    <span class="clickable inline-glyph pull-right btn btn-xs"
                          [title]="'Remove ' + provider.role"
                          (click)="onRemoveProvider(provider.name)"
                          data-toggle="tooltip"><span class="material-icons">cancel</span></span>
                </div>
                @if (isShowProvider(provider)) {
                <div class="panel-body">
                    <strong>Name</strong> {{ provider.name }}<br>
                    <strong>Enabled</strong>&nbsp;<input type="checkbox"
                                                         [checked]="isProviderEnabled(provider)"
                                                         (click)="onProviderEnabled(provider)"><br>
                    <div>
                        <span class="clickable inline-glyph material-icons"
                              (click)="toggleShowProviderParams(provider)">{{isShowProviderParams(provider) ? 'expand_more' : 'chevron_right'}}</span>
                        <span><strong>Params</strong></span>
                        @if (!isAddingProviderParam(provider)) {
                            <span class="clickable inline-glyph btn btn-xs"
                                  (click)="setAddingProviderParam(provider,true)"
                                  data-toggle="tooltip" title="Add Param"><span class="material-icons">add_circle</span></span>
                        }
                        @if (isAddingProviderParam(provider)) {
                            <span class="inline-editor inlineEditForm">
                                <input type="text" value="name" onClick="this.setSelectionRange(0, this.value.length)"
                                       #newParamName>
                                <input type="text" value="value" onClick="this.setSelectionRange(0, this.value.length)"
                                       #newParamValue>
                                <button class="btn btn-xs"
                                        (click)="setAddingProviderParam(provider,false);
                                                 addProviderParam(provider, newParamName.value, newParamValue.value);
                                                 showProviderParams(provider)">
                                  <span class="material-icons">check</span>
                                </button>
                                <button class="btn btn-xs" (click)="setAddingProviderParam(provider,false)">
                                  <span class="material-icons">close</span>
                                </button>
                            </span>
                        }
                        @if (isShowProviderParams(provider)) {
                            <div class="panel panel-default table-responsive">
                                <table class="table table-sm">
                                    @for (paramName of getProviderParamNames(provider); track paramName) {
                                        <tr>
                                            <td>
                                                <span class="clickable inline-glyph btn btn-xs"
                                                      title="Remove Param"
                                                      (click)="onRemoveProviderParam(provider, paramName)"
                                                      data-toggle="tooltip"><span class="material-icons">cancel</span></span>
                                            </td>
                                            <td><strong>{{ paramName }}</strong></td>
                                            <td>
                                                @if (!getProviderParamEditFlag(provider, paramName)) {
                                                    <span class="inline-editable"
                                                          (click)="setProviderParamEditFlag(provider, paramName, true)">{{provider.params[paramName]}}</span>
                                                }
                                                @if (getProviderParamEditFlag(provider, paramName)) {
                                                    <span class="inline-editor inlineEditForm">
                                                        <input type="text" size="30" [(ngModel)]="provider.params[paramName]">
                                                        <button class="btn btn-xs"
                                                                (click)="setProviderParamEditFlag(provider, paramName, false);changedProviders=providers">
                                                          <span class="material-icons">check</span>
                                                        </button>
                                                        <button class="btn btn-xs"
                                                                (click)="setProviderParamEditFlag(provider, paramName, false)">
                                                          <span class="material-icons">close</span>
                                                        </button>
                                                    </span>
                                                }
                                            </td>
                                        </tr>
                                    }
                                </table>
                            </div> <!-- Provider params -->
                        }
                    </div>
                </div> <!-- Provider Details -->
                }
            </div> <!-- Provider panel -->
        }

        <div style="overflow: hidden; padding-top: 10px;"> <!-- Provider Configuration Modification Buttons -->
            @if (showEditOptions()) {
                <button type="button"
                        title="Remove Provider Configuration"
                        class="btn btn-default btn-sm pull-left"
                        (click)="deleteConfirmModal.open('md')"
                        data-toggle="tooltip">
                    <span class="material-icons">delete</span>
                </button>
                <span class="pull-right">
                    <button type="button"
                            title="Discard Changes"
                            class="btn btn-default btn-sm"
                            [disabled]="!changedProviders"
                            (click)="discardConfirmModal.open('md')"
                            data-toggle="tooltip">
                      <span class="material-icons">refresh</span>
                    </button>
                    <span>&nbsp;</span>
                    <button type="button"
                            title="Update Provider Configuration"
                            class="btn btn-default btn-sm"
                            [disabled]="!changedProviders"
                            (click)="persistChanges()"
                            data-toggle="tooltip">
                      <span class="material-icons">save</span>
                    </button>
                </span>
            }
        </div>
    </div> <!-- Provider Configuration Details -->
    }

    <!-- Descriptor Details -->
    @if (hasSelectedResource() && resourceType === 'Descriptors') {
    <div class="panel-body">
        <div> <!-- Provider Config reference -->
            <div class="panel panel-default col-md-12">
        <span class="col-md-12 pull-left">
          <span class="col-md-sm"><strong>Provider Configuration</strong>&nbsp;</span>
          @if (!editModePC) {
              <span class="col-md-sm inline-editable" (click)="editModePC=true">{{descriptor.providerConfig}}</span>
          }
          @if (editModePC) {
              <span class="col-md-sm inline-editor inlineEditForm">
                <input type="text" size="40" [(ngModel)]="descriptor.providerConfig">
                <button class="btn btn-xs" (click)="editModePC=false;descriptor.setDirty()">
                  <span class="material-icons">check</span>
                </button>
                <button class="btn btn-xs" (click)="editModePC=false">
                  <span class="material-icons">close</span>
                </button>
              </span>
          }
          &nbsp;
          <span class="clickable inline-glyph btn btn-xs"
                (click)="chooseProviderConfigModal.open(descriptor, 'sm')"
                [class.disabled]="editModePC"
                data-toggle="tooltip"
                title="Choose Provider Configuration">
            <span class="material-icons">edit</span>
          </span>
        </span>
            </div>
            <app-provider-config-selector #choosePC></app-provider-config-selector>
        </div> <!-- Provider Config reference -->

        <br>

        <div class="panel panel-default">
            <div class="panel-heading">
        <span class="clickable inline-glyph material-icons"
              (click)="toggleShowServices()">{{isShowServices() ? 'expand_more' : 'chevron_right'}}</span>
                <span><strong>Services</strong></span>
                @if (!isAddingService) {
                    <span class="clickable inline-glyph btn btn-xs"
                          (click)="isAddingService=true"
                          data-toggle="tooltip" title="Add Service"><span class="material-icons">add_circle</span></span>
                }
                @if (isAddingService) {
                    <span class="inline-editor inlineEditForm">
                        <input type="text" value="name" onClick="this.setSelectionRange(0, this.value.length)"
                               #newServiceName>
                        <button class="btn btn-xs"
                                (click)="isAddingService=false;
                                         descriptor.addService(newServiceName.value);
                                         showServices()">
                          <span class="material-icons">check</span>
                        </button>
                        <button class="btn btn-xs" (click)="isAddingService=false">
                          <span class="material-icons">close</span>
                        </button>
                    </span>
                }
            </div>
            @if (isShowServices()) {
            <div class="panel-body table-responsive">
                <table class="table table-striped table-sm">
                    @for (service of descriptor.services; track service.name) {
                        <tr>
                            <td>
                                <div>
                                    @if (!getServiceVersionEditFlag(service) && !service.version) {
                                        <span class="inline-editable"
                                              (click)="setServiceVersionEditFlag(service, true)"
                                              title="Set version"
                                              data-toggle="tooltip"><strong>{{ service.name }}</strong></span>
                                    } @else {
                                        <span (click)="setServiceVersionEditFlag(service, true)"
                                              title="Set version"
                                              data-toggle="tooltip"><strong>{{ service.name }}</strong></span>
                                    }
                                    @if (!getServiceVersionEditFlag(service) && service.version) {
                                        <span (click)="setServiceVersionEditFlag(service, true)"
                                              [class]="service.version ? 'inline-editable' : ''">({{service.version}})</span>
                                    }
                                    @if (getServiceVersionEditFlag(service)) {
                                        <span class="inline-editor inlineEditForm">
                                          <input type="text" size="40" [(ngModel)]="service.version">
                                          <button class="btn btn-xs"
                                                  (click)="setServiceVersionEditFlag(service, false);descriptor.onVersionChanged(service)">
                                            <span class="material-icons">check</span>
                                          </button>
                                          <button class="btn btn-xs" (click)="setServiceVersionEditFlag(service, false)">
                                            <span class="material-icons">close</span>
                                          </button>
                                        </span>
                                    }

                                    <span class="clickable inline-glyph btn btn-xs pull-right"
                                          [title]="'Remove ' + service.name"
                                          (click)="onRemoveDescriptorService(service.name)"
                                          data-toggle="tooltip"><span class="material-icons">cancel</span></span>
                                </div>
                                <div>
                                    <span class="clickable inline-glyph material-icons"
                                          (click)="toggleShowServiceParams(service)">{{isShowServiceParams(service) ? 'expand_more' : 'chevron_right'}}</span>
                                    <span>Params</span><span>&nbsp;</span>
                                    @if (!isAddingServiceParam(service)) {
                                        <span class="clickable inline-glyph btn btn-xs"
                                              (click)="setAddingServiceParam(service,true)"
                                              data-toggle="tooltip"
                                              title="Add Param"><span class="material-icons">add_circle</span></span>
                                    }
                                    @if (isAddingServiceParam(service)) {
                                        <span class="inline-editor inlineEditForm">
                                            <input type="text" value="name"
                                                   onClick="this.setSelectionRange(0, this.value.length)" #newParamName>
                                            <input type="text" value="value"
                                                   onClick="this.setSelectionRange(0, this.value.length)" #newParamValue>
                                            <button class="btn btn-xs"
                                                    (click)="setAddingServiceParam(service,false);
                                                             descriptor.addServiceParam(service, newParamName.value, newParamValue.value);
                                                             showServiceParams(service)">
                                              <span class="material-icons">check</span>
                                            </button>
                                            <button class="btn btn-xs" (click)="setAddingServiceParam(service,false)">
                                              <span class="material-icons">close</span>
                                            </button>
                                        </span>
                                    }
                                </div>
                                @if (isShowServiceParams(service)) {
                                    <div class="table-responsive">
                                        @if (descriptor.getServiceParamNames(service).length > 0) {
                                            <table class="table table-sm">
                                                @for (paramKey of descriptor.getServiceParamNames(service); track paramKey) {
                                                    <tr>
                                                        <td width="5%">
                                                            <span class="clickable inline-glyph btn btn-xs"
                                                                  title="Remove Param"
                                                                  (click)="onRemoveDescriptorServiceParam(service.name, paramKey)"
                                                                  data-toggle="tooltip"><span class="material-icons">cancel</span></span>
                                                        </td>
                                                        <td width="30%"><strong>{{ paramKey }}</strong></td>
                                                        <td width="65%" align="left">
                                                            @if (!getServiceParamEditFlag(service, paramKey)) {
                                                                <span class="inline-editable"
                                                                      (click)="setServiceParamEditFlag(service, paramKey, true)">{{descriptor.getServiceParamValue(service, paramKey)}}</span>
                                                            }
                                                            @if (getServiceParamEditFlag(service, paramKey)) {
                                                                <span class="inline-editor inlineEditForm">
                                                                  <input type="text" size="40" [(ngModel)]="service.params[paramKey]">
                                                                  <button class="btn btn-xs"
                                                                          (click)="setServiceParamEditFlag(service, paramKey, false);descriptor.setDirty()">
                                                                    <span class="material-icons">check</span>
                                                                  </button>
                                                                  <button class="btn btn-xs"
                                                                          (click)="setServiceParamEditFlag(service, paramKey, false)">
                                                                    <span class="material-icons">close</span>
                                                                  </button>
                                                                </span>
                                                            }
                                                        </td>
                                                    </tr>
                                                }
                                            </table>
                                        }
                                    </div>
                                }
                                <div>
                                    <span class="clickable inline-glyph material-icons"
                                          (click)="toggleShowServiceURLs(service)">{{isShowServiceURLs(service) ? 'expand_more' : 'chevron_right'}}</span>
                                    <span>URLs</span><span>&nbsp;</span>
                                    @if (!isAddingServiceURL(service)) {
                                        <span (click)="setAddingServiceURL(service,true)"
                                              class="clickable inline-glyph btn btn-xs"
                                              data-toggle="tooltip" title="Add URL"><span class="material-icons">add_circle</span></span>
                                    }
                                    @if (isAddingServiceURL(service)) {
                                        <span class="inline-editor inlineEditForm">
                                            <input type="text" value="url"
                                                   onClick="this.setSelectionRange(0, this.value.length)" #newURL>
                                            <button class="btn btn-xs"
                                                    (click)="setAddingServiceURL(service,false);
                                                             descriptor.addServiceURL(service, newURL.value);
                                                             showServiceURLs(service)">
                                              <span class="material-icons">check</span>
                                            </button>
                                            <button class="btn btn-xs" (click)="setAddingServiceURL(service,false)">
                                              <span class="material-icons">close</span>
                                            </button>
                                        </span>
                                    }
                                </div>
                                @if (isShowServiceURLs(service)) {
                                    <div class="table-responsive">
                                        @if (service.urls && service.urls.length > 0) {
                                            <table class="table table-sm">
                                                @for (url of service.urls; track trackByServiceURLIndex($index, url); let i = $index) {
                                                    <tr>
                                                        <td width="5%">
                                                            <span class="clickable inline-glyph btn btn-xs"
                                                                  title="Remove URL"
                                                                  (click)="onRemoveDescriptorServiceURL(service.name, url)"
                                                                  data-toggle="tooltip"><span class="material-icons">cancel</span></span>
                                                        </td>
                                                        <td width="95%">
                                                            @if (!getServiceURLEditFlag(service, i)) {
                                                                <span class="inline-editable"
                                                                      (click)="setServiceURLEditFlag(service, i, true)">{{url}}</span>
                                                            }
                                                            @if (getServiceURLEditFlag(service, i)) {
                                                                <span class="inline-editor inlineEditForm">
                                                                    <input type="text" size="50" [(ngModel)]="service.urls[i]">
                                                                    <button class="btn btn-xs"
                                                                            (click)="setServiceURLEditFlag(service, i, false);descriptor.setDirty()">
                                                                      <span class="material-icons">check</span>
                                                                    </button>
                                                                    <button class="btn btn-xs"
                                                                            (click)="setServiceURLEditFlag(service, i, false)">
                                                                      <span class="material-icons">close</span>
                                                                    </button>
                                                                </span>
                                                            }
                                                        </td>
                                                    </tr>
                                                }
                                            </table>
                                        }
                                    </div>
                                }
                            </td>
                        </tr>
                    }
                </table>
            </div> <!-- Services table -->
            }
        </div> <!-- Services panel -->

        <div class="panel panel-default"> <!-- Discovery panel -->
            <div class="panel-heading">
        <span class="clickable inline-glyph material-icons"
              (click)="toggleShowServiceDiscovery()">{{isShowServiceDiscovery() ? 'expand_more' : 'chevron_right'}}</span>
                <span><strong>Discovery Details</strong></span>
            </div>
            @if (isShowServiceDiscovery()) {
            <div class="panel-body">
                <table class="table table-sm">
                    <!-- Discovery type field -->
                    <tr>
                        <td width="20%">
                            <span>
                              <strong>Type</strong>
                            </span>
                        </td>
                        <td>
                            <span>
                              <select id="select" autofocus required class="md-select form-control"
                                      [(ngModel)]="descriptor.discoveryType" (change)="descriptor.setDirty()">
                                @for (typeOption of resourceService.discoveryTypes; track typeOption) {
                                    <option class="md-option"
                                            [value]="typeOption"
                                            [selected]="descriptor.discoveryType === typeOption">{{typeOption}}</option>
                                }
                              </select>
                            </span>
                        </td>
                    </tr>
                    <!-- Discovery address field -->
                    <tr>
                        <td width="20%">
              <span [class]="!editModeAddress && !descriptor.discoveryAddress ? 'inline-editable' : ''"
                    (click)="editModeAddress=true">
                <strong>Address</strong>
              </span>
                            @if (!editModeAddress && !descriptor.discoveryAddress) {
                                <span>&nbsp;&nbsp;</span>
                            }
                        </td>
                        <td>
                            @if (!editModeAddress) {
                                <span class="inline-editable"
                                      (click)="editModeAddress=true">{{ descriptor.discoveryAddress }}</span>
                            }
                            @if (editModeAddress) {
                                <span class="inline-editor inlineEditForm">
                                    <input type="text" size="40" [(ngModel)]="descriptor.discoveryAddress">
                                    <button class="btn btn-xs" (click)="editModeAddress=false;descriptor.setDirty()">
                                      <span class="material-icons">check</span>
                                    </button>
                                    <button class="btn btn-xs" (click)="editModeAddress=false">
                                      <span class="material-icons">close</span>
                                    </button>
                                </span>
                            }
                        </td>
                    </tr>
                    <!-- Discovery cluster field -->
                    <tr>
                        <td width="20%">
              <span [class]="!editModeCluster && !descriptor.discoveryCluster ? 'inline-editable' : ''"
                    (click)="editModeCluster=true">
                <strong>Cluster</strong>
              </span>
                            @if (!editModeCluster && !descriptor.discoveryCluster) {
                                <span>&nbsp;&nbsp;</span>
                            }
                        </td>
                        <td>
                            @if (!editModeCluster) {
                                <span class="inline-editable"
                                      (click)="editModeCluster=true">{{ descriptor.discoveryCluster}}</span>
                            }
                            @if (editModeCluster) {
                                <span class="inline-editor inlineEditForm">
                                    <input type="text" size="40" [(ngModel)]="descriptor.discoveryCluster">
                                    <button class="btn btn-xs" (click)="editModeCluster=false;descriptor.setDirty()">
                                      <span class="material-icons">check</span>
                                    </button>
                                    <button class="btn btn-xs" (click)="editModeCluster=false">
                                      <span class="material-icons">close</span>
                                    </button>
                                </span>
                            }
                        </td>
                    </tr>
                    <!-- Discovery user field -->
                    <tr>
                        <td width="20%">
              <span [class]="!editModeUser && !descriptor.discoveryUser ? 'inline-editable' : ''"
                    (click)="editModeUser=true">
                  <strong>Username</strong>
              </span>
                            @if (!editModeUser && !descriptor.discoveryUser) {
                                <span>&nbsp;&nbsp;</span>
                            }
                        </td>
                        <td>
                            @if (!editModeUser) {
                                <span class="inline-editable"
                                      (click)="editModeUser=true">{{ descriptor.discoveryUser }}</span>
                            }
                            @if (editModeUser) {
                                <span class="inline-editor inlineEditForm">
                                    <input type="text" size="40" [(ngModel)]="descriptor.discoveryUser">
                                    <button class="btn btn-xs" (click)="editModeUser=false;descriptor.setDirty()">
                                      <span class="material-icons">check</span>
                                    </button>
                                    <button class="btn btn-xs" (click)="editModeUser=false">
                                      <span class="material-icons">close</span>
                                    </button>
                                </span>
                            }
                        </td>
                    </tr>
                    <!-- Discovery password alias field -->
                    <tr>
                        <td width="20%">
              <span [class]="!editModeAlias && !descriptor.discoveryPassAlias ? 'inline-editable' : ''"
                    (click)="editModeAlias=true">
                  <strong>Password Alias</strong>
              </span>
                            @if (!editModeAlias && !descriptor.discoveryPassAlias) {
                                <span>&nbsp;&nbsp;</span>
                            }
                        </td>
                        <td>
                            @if (!editModeAlias) {
                                <span class="inline-editable"
                                      (click)="editModeAlias=true">{{ descriptor.discoveryPassAlias }}</span>
                            }
                            @if (editModeAlias) {
                                <span class="inline-editor inlineEditForm">
                                    <input type="text" size="40" [(ngModel)]="descriptor.discoveryPassAlias">
                                    <button class="btn btn-xs" (click)="editModeAlias=false;descriptor.setDirty()">
                                      <span class="material-icons">check</span>
                                    </button>
                                    <button class="btn btn-xs" (click)="editModeAlias=false">
                                      <span class="material-icons">close</span>
                                    </button>
                                </span>
                            }
                        </td>
                    </tr>
                </table>
            </div><!-- Discovery details -->
            }
        </div><!-- Discovery panel -->

        <div style="overflow: hidden; padding-top: 10px;"> <!-- Descriptor Modification Buttons -->
            @if (showEditOptions()) {
                <button type="button"
                        title="Remove Descriptor"
                        class="btn btn-default btn-sm pull-left"
                        (click)="deleteConfirmModal.open('md')"
                        data-toggle="tooltip">
                    <span class="material-icons">delete</span>
                </button>
                <span class="pull-right">
                    <button type="button"
                            title="Discard Changes"
                            class="btn btn-default btn-sm"
                            [disabled]="!descriptor.isDirty()"
                            (click)="discardConfirmModal.open('md')"
                            data-toggle="tooltip">
                      <span class="material-icons">refresh</span>
                    </button>
                    <span>&nbsp;</span>
                    <button type="button"
                            title="Update Descriptor"
                            class="btn btn-default btn-sm"
                            [disabled]="!descriptor.isDirty()"
                            (click)="persistChanges()"
                            data-toggle="tooltip">
                      <span class="material-icons">save</span>
                    </button>
                </span>
            }
        </div>
    </div> <!-- Descriptor Details -->
    }

    <div>
        <app-modal (onClose)="deleteResource()" #deleteConfirmModal>
            <div class="modal-header">
                <h4 class="modal-title">Deleting {{getTitleSubject()}}</h4>
                <button type="button" class="btn-close" (click)="deleteConfirmModal.dismiss()"></button>
            </div>
            <div class="modal-body">Are you sure you want to delete
                <strong>{{resourceService.getResourceDisplayName(resource)}}</strong>?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm"
                        (click)="deleteConfirmModal.dismiss()">Cancel</button>
                <button type="button" class="btn btn-primary btn-sm"
                        (click)="deleteConfirmModal.close()">Ok</button>
            </div>
        </app-modal>

        <app-modal (onClose)="discardChanges()" #discardConfirmModal>
            <div class="modal-header">
                <h4 class="modal-title">Discard {{getTitleSubject()}} Changes</h4>
                <button type="button" class="btn-close" (click)="discardConfirmModal.dismiss()"></button>
            </div>
            <div class="modal-body">Are you sure you want to discard
                <strong>{{resourceService.getResourceDisplayName(resource)}}</strong> changes?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm"
                        (click)="discardConfirmModal.dismiss()">Cancel</button>
                <button type="button" class="btn btn-primary btn-sm"
                        (click)="discardConfirmModal.close()">Ok</button>
            </div>
        </app-modal>
    </div>
</div>
}

<!-- Topology Details -->
@if (resourceType === 'Topologies') {
<div>
    <app-topology-detail></app-topology-detail>
</div>
}

<!-- Service Definition Details -->
@if (resourceType === 'Service Definitions') {
<div>
    <app-servicedefinition-detail></app-servicedefinition-detail>
</div>
}