<clr-modal
    [(clrModalOpen)]="opened"
    [clrModalClosable]="false"
    [clrModalStaticBackdrop]="false">
    <div class="modal-body dialog-body">
        <div class="harbor-logo-black">
            <img
                [src]="
                    customLogo
                        ? 'images/' + customLogo
                        : 'images/harbor-logo.svg'
                "
                class="harbor-icon" />
        </div>
        <div class="content" tabindex="1">
            <div>
                {{ customName ? customName : ('APP_TITLE.HARBOR' | translate) }}
            </div>
            <div>
                <span class="p5 about-version"
                    >{{ 'ABOUT.VERSION' | translate }} {{ version }}</span
                >
            </div>
            <div *ngIf="!customIntroduction">
                <p class="p5">{{ 'ABOUT.COPYRIGHT' | translate }}</p>
                <p class="p5">
                    <a
                        routerLink="/license"
                        target="_blank"
                        rel="noopener noreferrer"
                        >{{ 'ABOUT.OPEN_SOURCE_LICENSE' | translate }}</a
                    >
                </p>
            </div>
            <div *ngIf="customIntroduction">
                <p class="p5">{{ customIntroduction }}</p>
            </div>
        </div>
    </div>
    <div class="modal-footer margin-left-override">
        <button type="button" class="btn btn-primary" (click)="close()">
            {{ 'BUTTON.CLOSE' | translate }}
        </button>
    </div>
</clr-modal>
