<style include="cr-icons cr-shared-style shared-style">
#clear-activities-button {
margin-inline-start: 8px;
}
#closeButton {
margin-inline-end: 16px;
}
#icon {
height: 24px;
margin-inline-end: 12px;
width: 24px;
}
cr-tabs {
--cr-tabs-font-size: inherit;
--cr-tabs-height: 40px;
border-bottom: 1px solid var(--google-grey-300);
}
.page-content {
display: flex;
flex-direction: column;
padding-bottom: 0;
}
cr-page-selector {
flex: 1;
position: relative;
}
activity-log-history,
activity-log-stream {
bottom: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
<div class="page-container" id="container">
<div class="page-content">
<div class="page-header">
<cr-icon-button class="icon-arrow-back no-overlap" id="closeButton"
aria-label="$i18n{back}" on-click="onCloseButtonClick_">
</cr-icon-button>
<template is="dom-if" if="[[!extensionInfo.isPlaceholder]]">
<img id="icon" src="[[extensionInfo.iconUrl]]" alt="">
</template>
<div class="cr-title-text">
[[getActivityLogHeading_(extensionInfo)]]
</div>
</div>
<cr-tabs id="tabs" selected="{{selectedSubpage_}}"
tab-names="[[tabNames_]]">
</cr-tabs>
<cr-page-selector selected="[[selectedSubpage_]]">
<div>
<template is="dom-if"
if="[[isHistoryTabSelected_(selectedSubpage_)]]" restamp>
<activity-log-history extension-id="[[extensionInfo.id]]"
delegate="[[delegate]]">
</activity-log-history>
</template>
</div>
<div>
<template is="dom-if"
if="[[isStreamTabSelected_(selectedSubpage_)]]">
<activity-log-stream extension-id="[[extensionInfo.id]]"
delegate="[[delegate]]">
</activity-log-stream>
</template>
</div>
</cr-page-selector>
</div>
</div>