<style include="cr-shared-style">
#currentTopicsSection {
align-items: center;
display: flex;
padding: 0 var(--cr-section-padding);
}
#currentTopicsDescriptionEmpty {
align-items: center;
}
.topics-empty-text-v2 {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 48px;
padding-bottom: 48px;
}
#currentTopicsSectionWrapper {
width: 100%;
}
#currentTopicsHeading {
color: var(--cr-secondary-text-color);
font-size: 100%;
font-weight: 500;
margin: 0;
padding-block-start: var(--cr-section-vertical-padding);
}
#currentTopicsDescription {
padding-block-end: var(--cr-section-vertical-padding);
}
#disclaimer {
padding: 0 var(--cr-section-padding);
padding-bottom: var(--cr-section-vertical-padding);
color: var(--cr-secondary-text-color);
}
#learnMoreLink {
background: none;
border: none;
color: var(--cr-link-color);
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: underline;
}
.no-topics {
padding-block-end: 32px;
padding-block-start: 16px;
padding-inline-start: 40px;
}
#blockedTopicsDescription {
min-height: auto;
padding-block-end: 16px;
padding-block-start: 16px;
}
#blockedTopicsDescriptionV2 {
color: var(--cr-secondary-text-color);
}
.no-blocked-topics {
padding-inline-start: 60px;
}
#blockedTopicsList {
padding: 0 var(--cr-section-padding);
}
.footer {
padding: 16px var(--cr-section-padding);
}
a {
color: var(--cr-link-color);
}
#dialog p {
margin: 0;
padding-block-end: 16px;
padding-block-start: 4px;
}
cr-toast {
--cr-toast-max-width: 80%;
}
</style>
<settings-toggle-button
id="topicsToggle"
pref="{{prefs.privacy_sandbox.m1.topics_enabled}}"
label="$i18n{topicsPageToggleLabel}"
sub-label="[[computeTopicsPageToggleSubLabel_(shouldShowV2_)]]"
on-settings-boolean-control-change="onToggleChange_">
</settings-toggle-button>
<div id="disclaimer" hidden="[[!shouldShowV2_]]">
$i18nRaw{topicsPageDisclaimerDesktop}
</div>
<template is="dom-if" if="[[!shouldShowV2EmptyState_]]" restamp>
<template is="dom-if" if="[[!isTopicsPrefManaged_(
prefs.privacy_sandbox.m1.topics_enabled.enforcement)]]" restamp>
<div id="currentTopicsSection">
<div id="currentTopicsSectionWrapper" class="hr">
<h2 id="currentTopicsHeading">
[[computeTopicsPageCurrentTopicsHeading_(shouldShowV2_)]]
</h2>
<div id="currentTopicsDescription" class="cr-secondary-text">
[[computeTopicsPageCurrentTopicsDescription_(shouldShowV2_)]]
<!-- TODO(b/262502300): Add "Learn more" into current topics
description string. -->
<button id="learnMoreLink" on-click="onLearnMoreClick_" aria-label=
"$i18n{topicsPageCurrentTopicsDescriptionLearnMoreA11yLabel}"
hidden="[[shouldShowV2_]]">
$i18n{topicsPageCurrentTopicsDescriptionLearnMoreLink}
</button>
</div>
<template is="dom-if" if="[[isTopicsEnabledAndLoaded_(
prefs.privacy_sandbox.m1.topics_enabled.value,
isTopicsListLoaded_)]]" restamp>
<div role="region" aria-label=
"$i18n{topicsPageCurrentTopicsRegionA11yDescription}">
<template is="dom-repeat" items="[[topicsList_]]">
<privacy-sandbox-interest-item interest="[[item]]"
on-interest-changed="onInterestChanged_">
</privacy-sandbox-interest-item>
</template>
</div>
<div id="currentTopicsDescriptionEmpty"
class="no-topics cr-secondary-text"
hidden="[[!isTopicsListEmpty_(topicsList_.length,
shouldShowV2_)]]">
$i18n{topicsPageCurrentTopicsDescriptionEmpty}
</div>
<div id="currentTopicsEmptyTextV2"
class="topics-empty-text-v2"
hidden="[[!isTopicsListEmptyV2_(topicsList_.length,
shouldShowV2_)]]">
<span id="currentTopicsDescriptionEmptyTextHeading">
$i18n{topicsPageCurrentTopicsDescriptionEmptyTextHeading}
</span>
<span id="currentTopicsDescriptionEmptyTextV2"
class="cr-secondary-text">
$i18n{topicsPageCurrentTopicsDescriptionEmptyTextV2}
</span>
</div>
</template>
<div id="currentTopicsDescriptionDisabled"
class="no-topics cr-secondary-text"
hidden="[[prefs.privacy_sandbox.m1.topics_enabled.value]]">
$i18n{topicsPageCurrentTopicsDescriptionDisabled}
</div>
</div>
</div>
</template>
<cr-expand-button id="blockedTopicsRow" class="cr-row"
expanded="{{blockedTopicsExpanded_}}">
[[computeTopicsPageBlockedTopicsHeading_(shouldShowV2_)]]
<div id="blockedTopicsDescriptionV2" hidden="[[!shouldShowV2_]]">
$i18n{topicsPageBlockedTopicsDescriptionNew}
</div>
</cr-expand-button>
<cr-collapse opened="[[blockedTopicsExpanded_]]">
<div id="blockedTopicsDescription"
class$="[[getBlockedTopicsDescriptionClass_(
blockedTopicsList_.length)]]"
hidden="[[shouldShowV2_]]">
[[computeBlockedTopicsDescription_(blockedTopicsList_.length)]]
</div>
<div id="blockedTopicsEmptyText"
class="topics-empty-text-v2"
hidden="[[!isBlockedTopicsListEmptyV2_(blockedTopicsList_.length,
shouldShowV2_)]]">
<span id="blockedTopicsDescriptionEmptyTextHeading">
$i18n{topicsPageBlockedTopicsDescriptionEmptyTextHeading}
</span>
<span id="blockedTopicsDescriptionEmptyTextV2"
class="cr-secondary-text">
$i18n{topicsPageBlockedTopicsDescriptionEmptyTextV2}
</span>
</div>
<div id="blockedTopicsList" role="region"
aria-label="$i18n{topicsPageBlockedTopicsRegionA11yDescription}">
<template is="dom-repeat" items="[[blockedTopicsList_]]">
<privacy-sandbox-interest-item interest="[[item]]"
on-interest-changed="onInterestChanged_">
</privacy-sandbox-interest-item>
</template>
</div>
</cr-collapse>
<template is="dom-if" if="[[shouldShowV2_]]">
<div id="manageTopicsSection" class="hr">
<cr-link-row id="privacySandboxManageTopicsLinkRow"
label="$i18n{manageTopicsHeading}"
sub-label="$i18n{manageTopicsDescription}"
on-click="onPrivacySandboxManageTopicsClick_">
</cr-link-row>
</div>
</template>
</template>
<div id="footer" class="cr-secondary-text hr footer"
hidden="[[shouldShowV2_]]">
$i18nRaw{topicsPageFooter}
</div>
<div id="footerV2" class="cr-secondary-text hr footer"
hidden="[[!shouldShowV2_]]">
$i18nRaw{topicsPageFooterV2}
</div>
<template is="dom-if" if="[[isLearnMoreDialogOpen_]]" restamp>
<cr-dialog id="dialog" on-close="onCloseDialog_" show-on-attach>
<div slot="title">$i18n{topicsPageLearnMoreHeading}</div>
<div slot="body">
<p>$i18n{topicsPageLearnMoreBullet1}</p>
<p>$i18n{topicsPageLearnMoreBullet2}</p>
<p>$i18nRaw{topicsPageLearnMoreBullet3}</p>
</div>
<div slot="button-container">
<cr-button id="closeButton" class="cancel-button" autofocus
on-click="onCloseDialog_">
$i18n{close}
</cr-button>
</div>
</cr-dialog>
</template>
<template is="dom-if" if="[[shouldShowV2_]]">
<cr-toast id="unblockTopicToast" duration="10000">
<div id="unblockTopicToastBody">$i18n{unblockTopicToastBody}</div>
<cr-button id="closeToastButton" on-click="onHideToastClick_">
$i18n{unblockTopicToastButtonText}
</cr-button>
</cr-toast>
</template>
<template is="dom-if" if="[[shouldShowBlockTopicDialog_]]" restamp>
<settings-simple-confirmation-dialog id="blockTopicDialog"
title-text="[[blockTopicDialogTitle_]]"
body-text="[[blockTopicDialogBody_]]"
confirm-text="$i18n{topicsPageBlockTopic}"
on-close="onBlockTopicDialogClose_">
</settings-simple-confirmation-dialog>
</template>