import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_--><style include="shared-style cr-shared-style">
  :host {
    align-items: center;
    display: flex;
  }

  #image {
    height: 120px;
    width: 248px;
  }

  a[href] {
    color: var(--cr-link-color);
  }

  #cardContent {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin-block: 16px;
    margin-inline-end: 6px;
    margin-inline-start: 24px;
  }

  #title {
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 6px;
  }

  #actionButton {
    margin-top: 10px;
    width: fit-content;
  }

  #closeButton {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: auto;
  }
</style>
<picture id="image">
  
  
    <source class="banner"
        srcset="./images/[[card.id]]_dark_non_branded.svg"
        media="(prefers-color-scheme: dark)">
    <img class="banner" alt=""
        src="./images/[[card.id]]_non_branded.svg">
  
</picture>
<div id="cardContent">
  <h2 id="title">[[card.title]]</h2>
  <div id="description" class="cr-primary-text label"
      inner-h-t-m-l="[[getDescription_(card)]]"></div>
  <cr-button id="actionButton" hidden="[[!card.actionButtonText]]"
      class="action-button" on-click="onActionButtonClick_">
    [[card.actionButtonText]]
  </cr-button>
</div>
<cr-icon-button id="closeButton" class="icon-clear no-overlap"
    on-click="onCloseClick_" title="$i18n{close}"
    aria-label="$i18n{closeNotificationCardButtonAriaLabel}">
</cr-icon-button>
<!--_html_template_end_-->`;
}
