<!-- Silence may be golden, but sometimes words paint the canvas of understanding. -->
<?php
    $image_url = LINKSYAI_SAR_PLUGIN_ADMIN_URL . 'assets/images/banners/icon-64x64.png';
?>

<div id="search-and-replace-app" v-cloak>
    <linksy-page-header breakpoint="lg">
        <template v-slot:title>
            <div class="d-flex">
                <img width="32" height="32" src="<?php echo esc_url($image_url); ?>" alt="Linksy search and replace" />
            </div>
        </template>
        <template v-slot:header-tabs>
            <div v-if="!isSetupIncomplete" class="d-flex align-items-center gap-3">
                <linksy-tab-bar class="d-flex justify-content-md-end" persist :tab="tab" :tabs="tabs" @on-select="handleTabSelect" @on-tab-mounted="handleTabMounted"></linksy-tab-bar>
            </div>
        </template>
        <template v-slot:actions>
            <div class="d-flex align-items-center gap-2">
                <linksy-button v-if="activeTab.id === 'broken-links'" :loading="isRescanning" :disabled="isRescanning" class="text-nowrap fs-6 p-0" variant="white_transparent" @click="generateLinks">
                    Rescan Broken Links
                </linksy-button>
                <h2 :class="{'m-0': !isSetupIncomplete, 'mx-0 my-3': isSetupIncomplete}" v-linksy-tooltip="{ message: 'Linksy\'s revolutionary Search and Replace tool empowers you to uncover and fix every link and anchor error with ease. With Link Replace, you can search for exact, partial match, and self-referential links to replace or fix. The Anchor Replace allows you to identify and correct any poorly done anchors, including those with unwanted punctuations or unnecessary spaces.', flow: 'left' }">
                </h2>
            </div>
        </template>
    </linksy-page-header>

    <div class="linksy-page-container container with-content position-relative">
        <div class="search-and-replace-setup" v-if="isSetupIncomplete">
            <linksy-search-replace-setup
                :is-scanning-links="isScanningLinks"
                :progress="progress"
                :is-notification-opened="isNotificationOpened"
                @on-close-modal="() => isNotificationOpened = false"
                @on-scan-links="reloadPostSummary"
            ></linksy-search-replace-setup>
        </div>
        <linksy-tab v-else :tab="tab" :tabs="tabs" v-slot="{currentTab}" v-if="tabsMounted">
            <link-replace v-if="currentTab.id == 'link-replace'"></link-replace>
            <url-replace v-if="currentTab.id == 'url-replace'"></url-replace>
            <anchor-replace v-if="currentTab.id == 'anchor-replace'"></anchor-replace>
            <title-replace v-if="currentTab.id == 'title-replace'"></title-replace>
            <database-replace v-if="currentTab.id == 'db-replace'"></database-replace>
            <broken-links v-if="currentTab.id == 'broken-links'"></broken-links>
            <rescan-links
                v-if="currentTab.id == 'rescan-links'"
                :is-notification-opened="isNotificationOpened"
                :is-scanning-links="isScanningLinks"
                @on-rescan-links="(e) => reloadPostSummary(e)"
                @on-close-modal="() => isNotificationOpened = false"
            ></rescan-links>
        </linksy-tab>
    </div>
 </div>