<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

@if (propertyDescriptor) {
    <div class="connector-property-definition flex flex-col gap-y-4">
        <div>
            <div>Name</div>
            <div class="tertiary-color font-medium">{{ propertyDescriptor.name }}</div>
        </div>
        <div>
            <div>Description</div>
            <div class="tertiary-color font-medium">{{ propertyDescriptor.description }}</div>
        </div>
        <div>
            <div>Type</div>
            <div class="tertiary-color font-medium">{{ formatPropertyType() }}</div>
        </div>
        <div>
            <div>Required</div>
            <div class="tertiary-color font-medium">{{ propertyDescriptor.required ? 'Yes' : 'No' }}</div>
        </div>
        @if (formatDefaultValue(); as defaultValue) {
            <div>
                <div>Default Value</div>
                <div class="tertiary-color font-medium">{{ defaultValue }}</div>
            </div>
        }
        @if (propertyDescriptor.allowableValues) {
            <div>
                <div>Allowable Values</div>
                <div class="tertiary-color font-medium">
                    <ul class="list-disc list-inside">
                        @for (allowableValue of propertyDescriptor.allowableValues; track allowableValue.value) {
                            <li>
                                {{ allowableValue.displayName }}
                                @if (allowableValue.description) {
                                    <i
                                        class="fa fa-info-circle primary-color"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        [tooltipInputData]="allowableValue.description"
                                        [delayClose]="false"></i>
                                }
                            </li>
                        }
                    </ul>
                </div>
            </div>
        }
        @if (propertyDescriptor.dependencies) {
            <div>
                <div>
                    Dependencies
                    <i
                        class="fa fa-info-circle primary-color"
                        nifiTooltip
                        [tooltipComponentType]="TextTip"
                        tooltipInputData="All dependencies must be satisfied"></i>
                </div>
                <div class="tertiary-color font-medium">
                    <ul class="list-disc list-inside">
                        @for (
                            propertyDependency of sortDependencies(propertyDescriptor.dependencies);
                            track propertyDependency.propertyName
                        ) {
                            <li>
                                @if (propertyDependency.dependentValues) {
                                    {{ propertyDependency.propertyName }} is set to any of [{{
                                        formatDependentValue(propertyDependency)
                                    }}]
                                } @else {
                                    {{ propertyDependency.propertyName }} has any value specified
                                }
                            </li>
                        }
                    </ul>
                </div>
            </div>
        }
    </div>
}
