<style include="shared-style">
:host {
--activity-log-call-and-time-width: 575px;
--activity-type-width: 85px;
--activity-time-width: 100px;
display: flex;
flex-direction: column;
}
cr-search-field {
align-self: center;
margin-inline-end: auto;
}
.activity-table-headings {
width: var(--activity-log-call-and-time-width);
}
#activity-type {
flex: 0 var(--activity-type-width);
}
#activity-key {
flex: 1;
margin-inline-start: 10px;
}
#activity-time {
flex: 0 var(--activity-time-width);
text-align: end;
}
iron-list {
flex: 1;
}
</style>
<div class="activity-subpage-header">
<cr-search-field label="$i18n{activityLogSearchLabel}"
on-search-changed="onSearchChanged_">
</cr-search-field >
<cr-button id="toggle-stream-button" on-click="onToggleButtonClick_">
<span hidden$="[[isStreamOn_]]">
$i18n{startActivityStream}
</span>
<span hidden$="[[!isStreamOn_]]">
$i18n{stopActivityStream}
</span>
</cr-button>
<cr-button class="clear-activities-button" on-click="clearStream">
$i18n{clearActivities}
</cr-button>
</div>
<div id="empty-stream-message" class="activity-message"
hidden$="[[!isStreamEmpty_(activityStream_.length)]]">
<span id="stream-stopped-message" hidden$="[[isStreamOn_]]">
$i18n{emptyStreamStopped}
</span>
<span id="stream-started-message" hidden$="[[!isStreamOn_]]">
$i18n{emptyStreamStarted}
</span>
</div>
<div id="empty-search-message" class="activity-message"
hidden$="[[!shouldShowEmptySearchMessage_(
activityStream_.length, filteredActivityStream_.length)]]">
$i18n{noSearchResults}
</div>
<div class="activity-table-headings"
hidden$="[[isFilteredStreamEmpty_(filteredActivityStream_.length)]]">
<span id="activity-type">$i18n{activityLogTypeColumn}</span>
<span id="activity-key">$i18n{activityLogNameColumn}</span>
<span id="activity-time">$i18n{activityLogTimeColumn}</span>
</div>
<iron-list items="[[filteredActivityStream_]]">
<template>
<activity-log-stream-item data="[[item]]"></activity-log-stream-item>
</template>
</iron-list>