<!DOCTYPE HTML>
<html i18n-values="dir:textdirection">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="charger_replacement.css">

<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/event_tracker.js"></script>
<script src="chrome://resources/js/cr/event_target.js"></script>
<script src="chrome://resources/js/cr/ui.js"></script>
<script src="chrome://resources/js/cr/ui/touch_handler.js"></script>
<script src="chrome://resources/js/local_strings.js"></script>
<script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome://charger-replacement/strings.js"></script>

<script src="../uber/uber_utils.js"></script>
<script src="charger_replacement.js"></script>

</head>

<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">

<div id="check-charger" class="page">
  <h2 i18n-content="checkChargerTitle"></h2>
  <p>
    <span i18n-content="checkChargerDamage"></span><br><br>
    <span i18n-content="checkOriginalCharger"></span><br>
  </p>
  <p i18n-content="whereDevicePurchased"></p>
  <div>
    <select id="select-device-country">
      <option selected="true" style="display:none;"
          i18n-content="selectCountry"></option>
      <option value="au" i18n-content="au"></option>
      <option value="ca" i18n-content="ca"></option>
      <option value="ire" i18n-content="ire"></option>
      <option value="uk" i18n-content="uk"></option>
      <option value="us" i18n-content="us"></option>
    </select>
  </div>
  <div id="charger-selection-strip">
  <p i18n-content="checkChargerSelectCharger"></p>
  <div id="charger-selection">
    <div id="new-charger-box" class="de-selected-charger">
      <img id="new-charger" src="images/new_charger_us.png">
      <img id="new-charger-us" src="images/new_charger_us.png" hidden>
      <img id="new-charger-uk" src="images/new_charger_uk.png" hidden>
      <img id="new-charger-au" src="images/new_charger_au.png" hidden>
    </div>
    <div id="original-charger-box" class="de-selected-charger">
      <img id="original-charger" src="images/original_charger_us.png">
      <img id="original-charger-us" src="images/original_charger_us.png" hidden>
      <img id="original-charger-uk" src="images/original_charger_uk.png" hidden>
      <img id="original-charger-au" src="images/original_charger_au.png" hidden>
    </div>
  </div>
  </div>
  <div class="button-strip">
    <button type="button" id="check-charger-next-step" class="command-button"
      i18n-content="nextStepButtonText"></button>
  </div>
</div>

<div id="confirm-safe-charger" class="page">
  <h2 i18n-content="confirmSafeChargerTitle"></h2>
  <img id="safe-charger-checkmark" src="images/safe-charger-checkmark.png">
  <p id="go-with-good-charger" i18n-content="goWithSafeCharger"></p>
  <div class="button-strip">
    <button type="button" id="back-to-check-charger"
        i18n-content="prevStepText" class="command-button"></button>
    <button type="button" id="finish-safe-charger"
        i18n-content="finishText" class="command-button"></button>
  </div>
</div>

<div id="charger-update" class="page">
  <h2 i18n-content="chargerUpdateTitle"></h2>
  <p>
    <span i18n-content="chargerUpdateP1"></span>
    <span class="stop-use-recalled-charger"
        i18n-content="stopUsingRecalledCharger"></span>
  </p>
  <p i18n-content="chargerUpdateP2"></p>
  <p i18n-values=".innerHTML:chargerUpdateFAQ"></p>
  <div>
    <div class="radio">
      <input id="order-new-charger" name="order-new-charger" type="radio"
           value="0">
      <label for="order-new-charger" i18n-content="orderNewCharger"></label>
    </div>
    <div class="radio">
      <div>
      <input id="not-order-new-charger" name="order-new-charger" type="radio"
          value="1">
      <label for="not-order-new-charger" i18n-content="notOrderNewCharger">
      </label>
      </div>
    </div>
  </div>
  <div id="not-order-charger-checkbox-strip">
    <div>
      <input id="confirm-not-order-charger" type="checkbox">
    </div>
    <div id="confirm-not-order-charger-label-strip" class="checkbox-label">
      <div>
        <label for="confirm-not-order-charger"
            i18n-content="confirmNotOrderNewCharger">
        </label>
      </div>
      <div>
        <label for="confirm-not-order-charger"
            i18n-content="noMoreShowText">
        </label>
      </div>
    </div>
  </div>
  <div class="button-strip">
    <button type="button" id="back-to-check-charger-from-charger-update"
        i18n-content="prevStepText" class="command-button"></button>
    <button type="button" id="next-to-charger-update"
        i18n-content="nextStepButtonText" class="command-button"></button>
  </div>

</div>

<div id="order-charger-online" class="page">
  <iframe id="charger-order-form">
  </iframe>
</div>

<div id="confirm-online-order" class="page">
  <h2 i18n-content="confirmOnlineOrder"></h2>
  <img id="safe-charger-checkmark" src="images/safe-charger-checkmark.png">
  <p>
    <span i18n-content="confirmReceivingOnlineOrder"></span><br>
  </p>
  <span i18n-content="needMoreInformation"></span><br>
  <a class="link" href="#" i18n-content="faqLink"></a>
  <div class="button-strip">
    <button type="button" id="finish-online-order"
        i18n-content="finishText" class="command-button"></button>
  </div>
</div>

<div id="finish-not-order-charger" class="page">
  <h2 i18n-content="finishNotOrderChargerTitle"></h2>
  <p>
    <span class="stop-use-recalled-charger"
        i18n-content="stopUsingRecalledCharger"></span>
  </p>
  <p i18n-values=".innerHTML:finishNotOrderChargerP2"></p>
  <p>
    <span i18n-content="finishNotOrderChargerMoreInfo"></span>
    <a class="link" href="#" i18n-content="faqLink"></a>
  </p><br>
  <div class="button-strip">
    <button type="button" id="finish-not-order-new-charger"
        i18n-content="finishText" class="command-button"></button>
  </div>
</div>

<div id="order-charger-offline" class="page">
  <h2 i18n-content="orderChargerOfflineTitle"></h2>
  <div id="offline-content">
    <div id="offline-content-left">
      <p>
        <span i18n-content="offlineChargerOrderParagraph1"></span>
        <span class="stop-use-recalled-charger"
            i18n-content="stopUsingRecalledCharger"></span><br>
      </p>
      <p i18n-content="offlineChargerOrderParagraph2"></p>
      <p i18n-values=".innerHTML:chargerUpdateFAQ"></p>
      <p i18n-values=".innerHTML:privacyPolicy"></p>
    </div>
    <div id="offline-content-divider"></div>
    <div id="offline-content-right">
      <div>
        <p id="offline-order-contact"
            i18n-content="offlineOrderPhoneNumber"></p>
      </div>
      <div>
        <div id="confirm-offline-order-checkbox-strip">
          <div>
            <input id="offline-order-confirm" type="checkbox">
          </div>
          <div class="checkbox-label">
            <label for="offline-order-confirm"
                i18n-content="offlineSafeChargerConfirmationText">
          </label>
          </div>
        </div>
        <div class="button-strip">
          <button type="button" id="finish-offline-order"
              i18n-content="finishText" class="command-button"></button>
        </div>
    </div>
    </div>
  </div>
</div>

<div id="charger-still-bad" class="page">
  <h2 i18n-content="chargerStillBadTitle"></h2>
  <p>
    <span i18n-content="chargedOrdered"></span><br>
    <span class="stop-use-recalled-charger"
        i18n-content="stopUsingRecalledCharger"></span><br>
  </p>
  <p i18n-values=".innerHTML:chargerUpdateFAQ"></p>
  <p>
    <span i18n-content="findMoreInfo"></span>
    <a class="link" href="#" i18n-content="faqLink"></a>
  </p>
   <div class="button-strip">
      <button type="button" id="finish-still-bad-charger"
          i18n-content="finishText" class="command-button"></button>
    </div>
</div>

<script src="chrome://resources/js/i18n_template2.js"></script>
</body>
</html>