<link rel="import" href="/icons.html">
<link rel="import" href="/shared_styles.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">

<dom-module id="supervised-user-learn-more">
  <template>
    <style include="shared-styles iron-flex iron-flex-alignment iron-positioning">
      :host {
        align-self: center;
      }

      #container {
        color: var(--primary-text-color);
        line-height: 20px;
        width: var(--page-width);
      }

      #title-area {
        border-bottom: var(--user-manager-separator-line);
        font-size: 16px;
        padding-bottom: 16px;
      }

      #title-area iron-icon {
        --iron-icon-height: 20px;
        --iron-icon-width: 20px;
        color: var(--title-icon-color);
      }

      .content-area {
        padding-top: 32px;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      #actions {
        bottom: 16px;
        position: absolute;
        right: 16px;
      }

      :host-context([dir='rtl']) #actions {
        left: 16px;
        right: auto;
      }
    </style>
    <div id="container">
      <div id="title-area" class="horizontal justified layout">
        <span id="title">$i18n{supervisedUserLearnMoreTitle}</span>
        <iron-icon icon="user-manager:supervisor-account"></iron-icon>
      </div>
      <div class="content-area"
          i18n-values=".innerHTML:supervisedUserLearnMoreText">
      </div>
      <div id="actions">
        <paper-button id="done" class="action primary" on-tap="onDoneTap_">
          $i18n{supervisedUserLearnMoreDone}
        </paper-button>
      </div>
    </div>
  </template>
  <script src="supervised_user_learn_more.js"></script>
</dom-module>