<div class="site-settings-stack">
    <section class="site-settings-card">
        <header class="site-settings-card__header">
            <div class="site-settings-card__title-row">
                <span class="site-settings-card__icon"><i class="pi pi-globe" aria-hidden="true"></i></span>
                <div>
                    <h3>{{ "sites.settings.general.title" | transloco }}</h3>
                </div>
            </div>
        </header>
        <div class="site-settings-card__body">
            <div class="site-settings-field">
                <span class="site-settings-field-label">{{ "sites.settings.general.domainLabel" | transloco }}</span>
                <div class="site-settings-value font-mono">{{ site()?.domain }}</div>
            </div>
            @if (site(); as activeSite) {
            <div class="site-settings-field">
                <span class="site-settings-field-label">{{ "sites.settings.general.siteIdLabel" | transloco }}</span>
                <div class="site-settings-resource-row">
                    <code class="site-settings-value site-settings-resource-value">{{ activeSite.id }}</code>
                    <app-copy-control [value]="activeSite.id" [text]="true" [rounded]="true" size="small" styleClass="p-button-sm" />
                </div>
            </div>
            }
        </div>
    </section>

    <section class="site-settings-card">
        <header class="site-settings-card__header">
            <div class="site-settings-card__title-row">
                <span class="site-settings-card__icon"><i class="pi pi-database" aria-hidden="true"></i></span>
                <div>
                    <h3>{{ "sites.settings.general.exportShortcutTitle" | transloco }}</h3>
                    <p>{{ "sites.settings.general.exportShortcutDescription" | transloco }}</p>
                </div>
            </div>
        </header>
        <footer class="site-settings-card__footer site-settings-card__footer--shortcut">
            <a pButton routerLink="/import-export/export" class="site-settings-action-link" icon="pi pi-arrow-right" [attr.aria-label]="'sites.settings.general.exportShortcutAction' | transloco">
                <span pButtonLabel>{{ "sites.settings.general.exportShortcutAction" | transloco }}</span>
            </a>
        </footer>
    </section>
</div>
