<!-- 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/. -->

<html:template id="template-translations-panel">
<panel id="translations-panel"
       class="panel-no-padding translations-panel"
       type="arrow"
       role="alertdialog"
       noautofocus="true"
       aria-labelledby="translations-panel-main-header-label"
       orient="vertical">
  <panelmultiview id="translations-panel-multiview"
                  mainViewId="translations-panel-view-default">
    <panelview id="translations-panel-view-default"
               class="PanelUI-subView translations-panel-view"
               role="document"
               showheader="true">
      <hbox class="panel-header translations-panel-header">
        <html:h1>
          <html:span id="translations-panel-header"></html:span>
        </html:h1>
        <toolbarbutton id="translations-panel-settings" class="panel-info-button"
                       data-l10n-id="translations-panel-settings-button"
                       closemenu="none"
                       oncommand="TranslationsPanel.openSettingsPopup(this)">
          <image class="translations-panel-gear-icon" />
          <menupopup>
            <menuitem class="always-translate-language-menuitem"
                      data-l10n-id="translations-panel-settings-always-translate-unknown-language"
                      type="checkbox"
                      checked="false"
                      autocheck="false"
                      oncommand="TranslationsPanel.onAlwaysTranslateLanguage()"/>
            <menuitem class="never-translate-language-menuitem"
                      data-l10n-id="translations-panel-settings-never-translate-unknown-language"
                      type="checkbox"
                      checked="false"
                      autocheck="false"
                      oncommand="TranslationsPanel.onNeverTranslateLanguage()"/>
            <menuitem class="never-translate-site-menuitem"
                      data-l10n-id="translations-panel-settings-never-translate-site"
                      type="checkbox"
                      checked="false"
                      autocheck="false"
                      oncommand="TranslationsPanel.onNeverTranslateSite()"/>
            <menuseparator/>
            <menuitem data-l10n-id="translations-panel-settings-manage-languages"
                      oncommand="TranslationsPanel.openManageLanguages()"/>
          </menupopup>
        </toolbarbutton>
      </hbox>

      <vbox class="translations-panel-content">
        <vbox id="translations-panel-lang-selection">
          <label data-l10n-id="translations-panel-from-label"></label>
          <menulist id="translations-panel-from"
                    flex="1"
                    value="detect"
                    size="large"
                    oncommand="TranslationsPanel.onChangeLanguages(event)">
            <menupopup id="translations-panel-from-menupopup"
                      class="translations-panel-language-menupopup-from">
              <menuitem data-l10n-id="translations-panel-choose-language" value=""></menuitem>
              <!-- The list of <menuitem> will be dynamically inserted. -->
            </menupopup>
          </menulist>

          <label data-l10n-id="translations-panel-to-label"></label>
          <menulist id="translations-panel-to"
                    flex="1"
                    value="detect"
                    size="large"
                    oncommand="TranslationsPanel.onChangeLanguages(event)">
            <menupopup id="translations-panel-to-menupopup"
                      class="translations-panel-language-menupopup-to">
              <menuitem data-l10n-id="translations-panel-choose-language" value=""></menuitem>
              <!-- The list of <menuitem> will be dynamically inserted. -->
            </menupopup>
          </menulist>
        </vbox>

        <vbox id="translations-panel-error">
          <hbox class="translations-panel-error-header">
            <image class="translations-panel-error-icon translations-panel-error-header-icon" />
            <description id="translations-panel-error-message"></description>
          </hbox>
          <hbox id="translations-panel-error-message-hint"></hbox>
          <hbox pack="end">
            <button id="translations-panel-translate-hint-action" />
          </hbox>
        </vbox>
      </vbox>

      <hbox class="panel-footer translations-panel-footer">
        <button id="translations-panel-restore-button"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onRestore(event);"
                data-l10n-id="translations-panel-restore-button"
                tabindex="0">
        </button>
        <button id="translations-panel-not-now"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onCancel(event);"
                data-l10n-id="translations-panel-translate-cancel"
                tabindex="0">
        </button>
        <button id="translations-panel-translate"
                class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onTranslate(event);"
                data-l10n-id="translations-panel-translate-button"
                default="true"
                tabindex="0">
        </button>
      </hbox>
    </panelview>

    <panelview id="translations-panel-view-unsupported-language"
               class="PanelUI-subView translations-panel-view"
               role="document"
               showheader="true">
      <hbox class="panel-header translations-panel-header">
        <image class="translations-panel-error-icon" />
        <html:h1>
          <html:span data-l10n-id="translations-panel-error-unsupported"></html:span>
        </html:h1>
      </hbox>

      <vbox class="translations-panel-content">
        <description id="translations-panel-error-unsupported-hint"></description>
      </vbox>

      <hbox class="panel-footer translations-panel-footer">
        <button class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onChangeSourceLanguage(event);"
                data-l10n-id="translations-panel-error-change-button"
                tabindex="0">
        </button>
        <button class="subviewbutton panel-subview-footer-button"
                oncommand="TranslationsPanel.onCancel(event);"
                data-l10n-id="translations-panel-error-dismiss-button"
                default="true"
                tabindex="0">
        </button>
      </hbox>
    </panelview>
  </panelmultiview>
</panel>
</html:template>