<style include="cr-shared-style cr-icons shared-style">
#etld-row {
align-items: center;
display: flex;
height: var(--cr-section-two-line-min-height);
}
.site-and-subtext {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0 calc(var(--cr-section-padding) + var(--cr-icon-ripple-margin));
overflow: hidden;
}
.site-wrapper {
display: flex;
}
.site {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.includes-subdomains {
color: var(--cr-secondary-text-color);
flex-shrink: 0;
margin-inline-start: 4px;
}
.site-subtext {
color: var(--cr-secondary-text-color);
}
#sites-list {
margin-inline-start: var(--cr-section-indent-padding);
}
.site-row {
align-items: center;
display: flex;
height: var(--cr-section-min-height);
}
</style>
<div id="etld-row" class$="[[getClassForIndex_(listIndex)]]">
<div class="site-favicon"
style$="background-image:[[getEtldOrSiteFaviconUrl_(data)]]"></div>
<div class="site-and-subtext">
<div class="site-wrapper">
<span id="etldOrSite" class="site">[[getDisplayUrl_(data)]]</span>
<span id="etldOrSiteIncludesSubdomains" class="includes-subdomains"
hidden$="[[!etldOrFirstSiteMatchesSubdomains_(data)]]">
$i18n{sitePermissionsIncludesSubdomains}
</span>
</div>
<span id="etldOrSiteSubtext" class="site-subtext">
[[getEtldOrSiteSubText_(data)]]
</span>
</div>
<template is="dom-if" if="[[isExpandable_]]">
<cr-expand-button no-hover id="expand-sites-button"
expanded="{{expanded_}}">
</cr-expand-button>
</template>
<template is="dom-if" if="[[!isExpandable_]]">
<cr-icon-button class="subpage-arrow" id="edit-one-site-button"
on-click="onEditSiteClick_">
</cr-icon-button>
</template>
</div>
<div id="sites-list" hidden$="[[!expanded_]]">
<template is="dom-repeat" items="[[data.sites]]">
<div class="site-row hr">
<div class="site-favicon"
style$="background-image:[[getFaviconUrl_(item.site)]]"></div>
<div class="site-and-subtext">
<div class="site-wrapper">
<span class="site">
[[getSiteWithoutSubdomainSpecifier_(item.site)]]
</span>
<span class="includes-subdomains"
hidden$="[[!matchesSubdomains_(item.site)]]">
$i18n{sitePermissionsIncludesSubdomains}
</span>
</div>
<span class="site-subtext">[[getSiteSubtext_(item)]]</span>
</div>
<cr-icon-button class="subpage-arrow" on-click="onEditSiteInListClick_">
</cr-icon-button>
</div>
</template>
</div>
<template is="dom-if" if="[[showEditSitePermissionsDialog_]]" restamp>
<site-permissions-edit-permissions-dialog
delegate="[[delegate]]"
extensions="[[extensions]]"
site="[[siteToEdit_.site]]"
original-site-set="[[siteToEdit_.siteSet]]"
on-close="onEditSitePermissionsDialogClose_">
</site-permissions-edit-permissions-dialog>
</template>