PlanTempusApp/PlanTempus.Application/Features/Settings/Components/SettingsTracking/Default.cshtml

<!-- Intro -->
<swp-info-box class="full-width">
    <i class="ph ph-chart-line-up"></i>
    <div>
        <strong>Tracking & Analytics</strong>
        <p>Tilslut dine foretrukne analyse- og marketingværktøjer for at måle trafik og konverteringer på din online booking. Aktiver kun de tjenester du bruger.</p>
    </div>
</swp-info-box>

<!-- Meta Pixel -->
<swp-card class="tracking-card" data-tracker="meta">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-meta-logo"></i>
            Meta Pixel (Facebook)
        </swp-card-title>
        <swp-toggle-slider data-value="yes">
            <swp-toggle-option>Ja</swp-toggle-option>
            <swp-toggle-option>Nej</swp-toggle-option>
        </swp-toggle-slider>
    </swp-card-header>
    <swp-card-content>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>Pixel ID</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="metaPixelId">123456789012345</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
        <swp-tracking-hint>
            <i class="ph ph-info"></i>
            Bruges til Facebook og Instagram annoncering og remarketing
        </swp-tracking-hint>
    </swp-card-content>
</swp-card>

<!-- Google Analytics -->
<swp-card class="tracking-card" data-tracker="ga4">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-chart-line"></i>
            Google Analytics (GA4)
        </swp-card-title>
        <swp-toggle-slider data-value="yes">
            <swp-toggle-option>Ja</swp-toggle-option>
            <swp-toggle-option>Nej</swp-toggle-option>
        </swp-toggle-slider>
    </swp-card-header>
    <swp-card-content>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>Measurement ID</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="ga4Id">G-ABC123XYZ</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
        <swp-tracking-hint>
            <i class="ph ph-info"></i>
            Google Analytics 4 til website trafik og brugeradfærd
        </swp-tracking-hint>
    </swp-card-content>
</swp-card>

<!-- Google Tag Manager -->
<swp-card class="tracking-card" data-tracker="gtm">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-code"></i>
            Google Tag Manager
        </swp-card-title>
        <swp-toggle-slider data-value="no">
            <swp-toggle-option>Ja</swp-toggle-option>
            <swp-toggle-option>Nej</swp-toggle-option>
        </swp-toggle-slider>
    </swp-card-header>
    <swp-card-content>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>Container ID</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="gtmId">GTM-XXXXXXX</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
        <swp-tracking-hint>
            <i class="ph ph-info"></i>
            Central styring af alle tracking-tags
        </swp-tracking-hint>
    </swp-card-content>
</swp-card>

<!-- Plausible -->
<swp-card class="tracking-card" data-tracker="plausible">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-leaf"></i>
            Plausible Analytics
        </swp-card-title>
        <swp-toggle-slider data-value="no">
            <swp-toggle-option>Ja</swp-toggle-option>
            <swp-toggle-option>Nej</swp-toggle-option>
        </swp-toggle-slider>
    </swp-card-header>
    <swp-card-content>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>Domæne</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="plausibleDomain">minside.dk</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
        <swp-tracking-hint class="privacy">
            <i class="ph ph-shield-check"></i>
            Privacy-venlig analytics uden cookies - GDPR compliant
        </swp-tracking-hint>
    </swp-card-content>
</swp-card>

<!-- Fathom -->
<swp-card class="tracking-card" data-tracker="fathom">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-eye"></i>
            Fathom Analytics
        </swp-card-title>
        <swp-toggle-slider data-value="no">
            <swp-toggle-option>Ja</swp-toggle-option>
            <swp-toggle-option>Nej</swp-toggle-option>
        </swp-toggle-slider>
    </swp-card-header>
    <swp-card-content>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>Site ID</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="fathomSiteId">ABCDEFGH</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
        <swp-tracking-hint class="privacy">
            <i class="ph ph-shield-check"></i>
            Privacy-venlig analytics uden cookies - GDPR compliant
        </swp-tracking-hint>
    </swp-card-content>
</swp-card>

<!-- Matomo -->
<swp-card class="tracking-card" data-tracker="matomo">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-database"></i>
            Matomo
        </swp-card-title>
        <swp-toggle-slider data-value="no">
            <swp-toggle-option>Ja</swp-toggle-option>
            <swp-toggle-option>Nej</swp-toggle-option>
        </swp-toggle-slider>
    </swp-card-header>
    <swp-card-content>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>Server URL</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="matomoUrl">https://matomo.minside.dk</swp-edit-value>
            </swp-edit-row>
            <swp-edit-row>
                <swp-edit-label>Site ID</swp-edit-label>
                <swp-edit-value contenteditable="true" class="mono" id="matomoSiteId">1</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
        <swp-tracking-hint class="privacy">
            <i class="ph ph-shield-check"></i>
            Self-hosted analytics - fuld kontrol over dine data
        </swp-tracking-hint>
    </swp-card-content>
</swp-card>

<!-- Custom Scripts -->
<swp-card class="tracking-card full-width">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-code-block"></i>
            Brugerdefinerede Scripts
        </swp-card-title>
    </swp-card-header>
    <swp-card-content>
        <swp-script-section>
            <swp-script-label>
                <i class="ph ph-file-code"></i>
                Scripts i &lt;head&gt;
            </swp-script-label>
            <textarea class="script-textarea" id="customHeadScripts" placeholder="<!-- Indsæt custom tracking kode her -->"></textarea>
        </swp-script-section>
        <swp-script-section>
            <swp-script-label>
                <i class="ph ph-file-code"></i>
                Scripts før &lt;/body&gt;
            </swp-script-label>
            <textarea class="script-textarea" id="customBodyScripts" placeholder="<!-- Indsæt custom kode her -->"></textarea>
        </swp-script-section>
    </swp-card-content>
</swp-card>

<!-- Generated Code Preview -->
<swp-card class="code-preview-card">
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-terminal"></i>
            Genereret Kode
        </swp-card-title>
        <swp-btn class="secondary sm" id="copyTrackingCode">
            <i class="ph ph-copy"></i>
            Kopier
        </swp-btn>
    </swp-card-header>
    <swp-card-content>
        <swp-code-info>
            <i class="ph ph-info"></i>
            Denne kode indsættes automatisk i &lt;head&gt; på din online booking side
        </swp-code-info>
        <pre class="code-preview" id="trackingCodePreview"><code>&lt;!-- Ingen aktive tracking-koder --&gt;</code></pre>
    </swp-card-content>
</swp-card>