<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'">
    <meta name="color-scheme" content="light dark">
    <meta name="viewport" content="width=device-width" />
    <title data-l10n-id="about-translations-title"></title>
    <link rel="stylesheet" href="chrome://global/skin/global.css">
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
    <link rel="stylesheet" href="chrome://global/content/translations/translations.css">
    <link rel="localization" href="toolkit/branding/brandings.ftl"/>
    <link rel="localization" href="locales-preview/aboutTranslations.ftl"/>
    <script type="module" src="chrome://global/content/translations/translations.mjs"></script>
  </head>
  <body>
    <h1 data-l10n-id="about-translations-header"></h1>
    <main class="about-translations-contents">

      <header class="about-translations-header">
        <div class="about-translations-header-start">
          <select
            class="about-translations-select"
            id="language-from"
            disabled>
            <option data-l10n-id="about-translations-detect" value="detect"></option>
          </select>
        </div>
        <div class="about-translations-header-end">
          <select
            class="about-translations-select"
            id="language-to"
            disabled>
            <option data-l10n-id="about-translations-select" value=""></option>
          </select>
        </div>
      </header>

      <main class="about-translations-input">
        <div class="about-translations-input-start">
          <textarea
            class="about-translations-input-textarea"
            data-l10n-id="about-translations-textarea"
            id="translation-from"
            ></textarea>
        </div>
        <div class="about-translations-input-end">
          <div
            class="about-translations-input-results about-translations-input-results-blank"
            id="translation-to-blank">
            <div class="about-translations-info" id="translation-info">
              <div class="about-translations-info-icon"></div>
              <div class="about-translations-info-message" id="translation-info-message"></div>
            </div>
            <div data-l10n-id="about-translations-results-placeholder"></div>
          </div>
          <div
            class="about-translations-input-results"
            id="translation-to">
          </div>
        </div>
      </main>

    </div>
  </body>
</html>
