<!-- Copyright 2016 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.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/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<iron-iconset-svg name="oobe-buttons-20" size="20">
  <svg>
    <defs>
      <g id="arrow-forward" fill-rule="nonzero">
        <path d="M7 13.825L11.327 10 7 6.175 8.332 5 14 10l-5.668 5z">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<iron-iconset-svg name="oobe-buttons-40" size="40">
  <svg>
    <defs>
      <g id="arrow-forward" fill-rule="nonzero">
        <path d="M14 27.65L22.653 20 14 12.35 16.664 10 28 20 16.664 30z">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<!--
  Material design square button for text-labelled buttons.
  By default, text is blue, background is white.
  |inverse| makes text white on a blue background.
  Note, that slotted element must have separate DOM node (i.e. a separate div).

  Example:
    <oobe-icon-button inverse>
      <div i18n-content="oobeOKButtonText"></div>
    </oobe-icon-button>

  Attributes:
    'disabled' - button is disabled when the attribute is set.
    (See crbug.com/900640)
    'inverse' - makes text white and background blue.
    'label-for-aria' - accessibility label.
    'border' - adds border to the button.
-->
<dom-module id="oobe-text-button">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
    <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css">
    <style include="cr-icons cr-shared-style"></style>
    <link rel="stylesheet" href="oobe_fonts.css">
    <link rel="stylesheet" href="oobe_text_buttons.css">
    <cr-button id="textButton" on-tap="onClick_" disabled="[[disabled]]"
        inverse$="[[inverse]]" aria-label$="[[labelForAria]]"
        border$="[[border]]" android$="[[android]]">
      <div id="container"
          class="flex layout horizontal center center-justified self-stretch">
        <slot></slot>
      </div>
    </cr-button>
  </template>
</dom-module>

<!--
  Material design square "<- Back" and "Next ->" buttons.
  Text is blue, background is white.

  Example:
    <oobe-back-button on-click="handleOnClick_"></oobe-back-button>

  (Note that there is no space between opening and closing tag.)

  Content is optional, "Back" and "Next" will be used if not specified.
    <oobe-back-button on-click="handleOnClick_">
      Continue
    </oobe-back-button>

  Attributes:
    'disabled' - button is disabled when the attribute is set.
    (See crbug.com/900640)
    'label-for-aria' - accessibility label.
-->
<dom-module id="oobe-back-button">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
    <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css">
    <style include="cr-icons cr-shared-style"></style>
    <link rel="stylesheet" href="oobe_fonts.css">
    <link rel="stylesheet" href="oobe_text_buttons.css">
    <link rel="stylesheet" href="oobe_back_button.css">
    <cr-button id="button" on-click="onClick_" disabled="[[disabled]]"
        aria-label$="[[labelForAria]]">
      <div class="flex horizontal layout start center">
        <hd-iron-icon
            icon1x="oobe-buttons-20:arrow-forward"
            icon2x="oobe-buttons-40:arrow-forward">
        </hd-iron-icon>
        <slot>
          <div id="text" i18n-content="back"></div>
        </slot>
      </div>
    </cr-button>
  </template>
</dom-module>

<dom-module id="oobe-next-button">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
    <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css">
    <style include="cr-icons cr-shared-style"></style>
    <link rel="stylesheet" href="oobe_fonts.css">
    <link rel="stylesheet" href="oobe_text_buttons.css">
    <link rel="stylesheet" href="oobe_next_button.css">
    <cr-button id="button" on-tap="onClick_" disabled="[[disabled]]"
        class="action-button">
      <div class="flex horizontal layout start center">
        <slot>
          <div id="text" i18n-content="next"></div>
        </slot>
        <hd-iron-icon
            icon1x="oobe-buttons-20:arrow-forward"
            icon2x="oobe-buttons-40:arrow-forward">
        </hd-iron-icon>
      </div>
    </cr-button>
  </template>
</dom-module>

<!--
  Material design button that shows an icon and displays text.

  Example:
    <oobe-welcome-secondary-button icon="close">
      <div i18n-content="oobeCloseButtonText"></div>
    </oobe-welcome-secondary-button>

  Attributes:
    1x and 2x icons:
      'icon1x' - a name of icon from material design set to show on button.
      'icon2x' - a name of icon from material design set to show on button.
    'label-for-aria' - accessibility label.
-->
<dom-module id="oobe-welcome-secondary-button">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
    <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css">
    <style include="cr-icons cr-shared-style"></style>
    <link rel="stylesheet" href="oobe_fonts.css">
    <link rel="stylesheet" href="oobe_text_buttons.css">
    <link rel="stylesheet" href="oobe_welcome_secondary_button.css">
    <cr-button id="button" aria-label$="[[labelForAria]]">
      <div id="container" class="flex vertical layout center self-stretch">
        <div class="flex layout horizontal center self-stretch center-justified">
          <hd-iron-icon id="icon" icon1x="[[icon1x]]" icon2x="[[icon2x]]"
              class="oobe-icon" hidden>
          </hd-iron-icon>
          <slot></slot>
        </div>
      </div>
    </cr-button>
  </template>
</dom-module>