includes/modals/import_modal.php

<?php
require_once __DIR__ . '/../settings.php';

/*
|--------------------------------------------------------------------------
| Default values
|--------------------------------------------------------------------------
|
| The import modal needs a few safe defaults before JavaScript takes over:
| - the configured Brivacia sites
| - the default target site
| - a one-year default import range
|
*/

$options = function_exists('brivacia_public_settings')
    ? brivacia_public_settings()
    : [];

$sites = is_array($options['sites'] ?? null) ? $options['sites'] : [];
$defaultSite = array_key_first($sites) ?? parse_url((string)($_SERVER['HTTP_HOST'] ?? ''), PHP_URL_HOST) ?? '';
$today = date('Y-m-d');
$from = date('Y-m-d', strtotime('-1 year'));
?>

<dialog class="modal" data-import id="import-modal">
    <div>
        <h2><?= h(t('import.title')) ?> <span data-import-provider-label></span></h2>
        <p><?= h(t('import.description')) ?></p>

        <form id="import-form">
            <!-- Active provider selected from the import dropdown. -->
            <input name="provider" type="hidden" value="">

            <!--
            |--------------------------------------------------------------------------
            | Matomo API importer
            |--------------------------------------------------------------------------
            |
            | Provider-specific fields required to connect to Matomo through its HTTP API.
            | Matomo Database has a separate panel because it uses direct database access.
            |
            -->
            <section data-import-provider-panel="matomo_api">
                <h3><?= h(t('import.matomo.connection.title')) ?></h3>
                <p><?= h(t('import.matomo.connection.help')) ?></p>

                <label>
                    <?= h(t('import.matomo.url')) ?>
                    <small><?= h(t('import.matomo.url.help')) ?></small>
                    <input autocomplete="url" data-import-provider-input="matomo_api" name="url" placeholder="<?= h(t('import.matomo.url.help.placeholder')) ?>" required type="url">
                </label>

                <label>
                    <?= h(t('import.matomo.site_id')) ?>
                    <small><?= h(t('import.matomo.site_id.help')) ?></small>
                    <input data-import-provider-input="matomo_api" min="1" name="site" placeholder="1" required type="number" value="1">
                </label>

                <label>
                    <input name="multi_domain" type="checkbox" data-import-domain-toggle>
                    <?= h(t('import.multi_domain')) ?>
                    <small><?= h(t('import.multi_domain.help')) ?></small>
                </label>

                <label data-import-domain-field hidden>
                    <?= h(t('import.matomo.domain_filter')) ?>
                    <small><?= h(t('import.matomo.domain_filter.help')) ?></small>
                    <input name="domain_filter" placeholder="<?= h(t('import.matomo.domain_filter.placeholder')) ?>" type="text">
                </label>

                <label>
                    <?= h(t('import.matomo.token')) ?>
                    <small><?= h(t('import.matomo.token.help')) ?></small>
                    <small><?= h(t('import.matomo.token.path')) ?></small>
                    <input autocomplete="off" data-import-provider-input="matomo_api" name="token" required type="password">
                    <button aria-label="<?= h(t('ui.reveal')) ?>" data-token-toggle title="<?= h(t('ui.reveal')) ?>" type="button"><?= icon('visits') ?></button>
                </label>
            </section>

            <!--
            |--------------------------------------------------------------------------
            | Matomo Database importer
            |--------------------------------------------------------------------------
            |
            | Direct database access is intended for local Matomo installations.
            | It avoids API rate limits but requires MySQL/MariaDB credentials.
            |
            -->
            <section data-import-provider-panel="matomo_db">
                <h3><?= h(t('import.matomo.db.connection.title')) ?></h3>
                <p><?= h(t('import.matomo.db.connection.help')) ?></p>

                <label>
                    <?= h(t('import.matomo.db.host')) ?>
                    <small><?= h(t('import.matomo.db.host.help')) ?></small>
                    <input autocomplete="off" data-import-provider-input="matomo_db" name="db_host" placeholder="localhost" required type="text" value="91.216.107.161">
                </label>

                <label>
                    <?= h(t('import.matomo.db.port')) ?>
                    <small><?= h(t('import.matomo.db.port.help')) ?></small>
                    <input data-import-provider-input="matomo_db" min="1" name="db_port" placeholder="3306" required type="number" value="3306">
                </label>

                <label>
                    <?= h(t('import.matomo.db.name')) ?>
                    <small><?= h(t('import.matomo.db.name.help')) ?></small>
                    <input autocomplete="off" data-import-provider-input="matomo_db" name="db_name" placeholder="matomo" required type="text" value="breat1205863_1o3o0a">
                </label>

                <label>
                    <?= h(t('import.matomo.db.user')) ?>
                    <small><?= h(t('import.matomo.db.user.help')) ?></small>
                    <input autocomplete="off" data-import-provider-input="matomo_db" name="db_user" placeholder="matomo" required type="text" value="breat1205863">
                </label>

                <label>
                    <?= h(t('import.matomo.db.password')) ?>
                    <small><?= h(t('import.matomo.db.password.help')) ?></small>
                    <input autocomplete="off" data-import-provider-input="matomo_db" name="db_password" type="password">
                    <button aria-label="<?= h(t('ui.reveal')) ?>" data-token-toggle title="<?= h(t('ui.reveal')) ?>" type="button"><?= icon('visits') ?></button>
                </label>

                <label>
                    <?= h(t('import.matomo.db.prefix')) ?>
                    <small><?= h(t('import.matomo.db.prefix.help')) ?></small>
                    <input autocomplete="off" data-import-provider-input="matomo_db" name="db_prefix" placeholder="matomo_" type="text" value="stats_">
                </label>

                <label>
                    <?= h(t('import.matomo.site_id')) ?>
                    <small><?= h(t('import.matomo.site_id.help')) ?></small>
                    <input data-import-provider-input="matomo_db" min="1" name="site" placeholder="1" required type="number" value="1">
                </label>

                <label>
                    <input name="multi_domain" type="checkbox" data-import-domain-toggle>
                    <?= h(t('import.multi_domain')) ?>
                    <small><?= h(t('import.multi_domain.help')) ?></small>
                </label>

                <label data-import-domain-field hidden>
                    <?= h(t('import.matomo.domain_filter')) ?>
                    <small><?= h(t('import.matomo.domain_filter.help')) ?></small>
                    <input name="domain_filter" placeholder="<?= h(t('import.matomo.domain_filter.placeholder')) ?>" type="text">
                </label>
            </section>

            <!--
            |--------------------------------------------------------------------------
            | Shared import settings
            |--------------------------------------------------------------------------
            |
            | These settings are reused by available import providers:
            | - import period
            | - target Brivacia site
            |
            -->
            <section data-import-shared-panel>
                <h3><?= h(t('import.range.title')) ?></h3>
                <p><?= h(t('import.range.help')) ?></p>

                <label>
                    <?= h(t('import.from')) ?>
                    <input name="from" required type="date" value="<?= h($from) ?>">
                </label>

                <label>
                    <?= h(t('import.to')) ?>
                    <input name="to" required type="date" value="<?= h($today) ?>">
                </label>

                <label>
                    <?= h(t('import.brivacia_site')) ?>
                    <small><?= h(t('import.brivacia_site.help')) ?></small>
                    <select name="brivacia_site" required>
                        <?php foreach ($sites as $code => $domain): ?>
                            <option value="<?= h((string)$code) ?>" <?= (string)$code === (string)$defaultSite ? 'selected' : '' ?>>
                                <?= h((string)$code) ?><?= trim((string)$domain) !== '' ? ' — ' . h((string)$domain) : '' ?>
                            </option>
                        <?php endforeach; ?>
                        <?php if (!$sites): ?>
                            <option value="<?= h($defaultSite) ?>"><?= h($defaultSite) ?></option>
                        <?php endif; ?>
                    </select>
                </label>
            </section>

            <!--
            |--------------------------------------------------------------------------
            | Shared content selection
            |--------------------------------------------------------------------------
            |
            | Controls which aggregated datasets are imported into Brivacia.
            |
            -->
            <section data-import-shared-panel>
                <h3><?= h(t('import.content.title')) ?></h3>
                <p><?= h(t('import.content.help')) ?></p>

                <label>
                    <input checked name="import_hits" type="checkbox">
                    <?= h(t('import.content.hits')) ?>
                </label>

                <label>
                    <input checked name="import_countries" type="checkbox">
                    <?= h(t('import.content.countries')) ?>
                </label>

                <label>
                    <input checked name="import_referrers" type="checkbox">
                    <?= h(t('import.content.referrers')) ?>
                </label>

                <label>
                    <input checked name="import_pages" type="checkbox">
                    <?= h(t('import.content.pages')) ?>
                </label>

                <label>
                    <input name="replace" type="checkbox">
                    <?= h(t('import.replace')) ?>
                    <small><?= h(t('import.replace.help')) ?></small>
                </label>
            </section>

            <!--
            |--------------------------------------------------------------------------
            | Import status messages
            |--------------------------------------------------------------------------
            |
            | Updated dynamically by imports.js:
            | - connection tests
            | - import progress
            | - unavailable providers
            | - network errors
            |
            -->
            <p
                data-error="<?= h(t('import.messages.error')) ?>"
                data-importing="<?= h(t('import.messages.importing')) ?>"
                data-mode-api="<?= h(t('import.mode.api')) ?>"
                data-mode-database="<?= h(t('import.mode.database')) ?>"
                data-network-error="<?= h(t('import.messages.network_error')) ?>"
                data-provider-unavailable="<?= h(t('import.provider.unavailable')) ?>"
                data-testing="<?= h(t('import.messages.testing')) ?>"
                id="import-message"></p>

            <!-- Import actions. Hidden automatically for unavailable providers. -->
            <div>
                <button type="button" value="cancel"><?= h(t('ui.cancel')) ?></button>
                <button data-import-action-button type="submit" value="test"><?= h(t('import.test')) ?></button>
                <button data-import-action-button type="submit" value="import"><?= h(t('ui.import')) ?></button>
            </div>
        </form>
    </div>
</dialog>