## -*- coding: utf-8 -*-

<%inherit file="base.html"/>
<%page args="strings, rtl=False, lang='en', **kwargs"/>

<div class="container-fluid"
     style="width: 96%; align: center; margin: 2%">
  <div class="container-fluid" style="padding: 2%">
  <p>
    <h2>${_(strings.BRIDGES[1])}</h2>
  </p>
  </div>
  <div class="container-fluid"
       style="width: 100%; align: center; padding: 2%;">
    <p>
      ${_(strings.WELCOME[0]) % \
         ("""<a href="https://www.torproject.org/docs/pluggable-transports.html">""",
          """</a>""")}
    </p>
    <p>
      ${_(strings.WELCOME[1])}
    </p>
## The '&#8212' char is a literal emdash ('―'), but it's also XML parseable.
    <p>
      ${_(strings.WELCOME[2]) % ("&#8212", "&#8212")}
    </p>
    <div class="container-fluid" style="align: center: margin: 2%;">
      <div style="align: center; padding: 5%;">
        <p class="bs-component">
          <a href="./bridges">
            <button class="btn btn-success btn-lg btn-block"
                    type="button"
                    accesskey="j">
## TRANSLATORS: Please make sure the '%s' surrounding single letters at the
##              beginning of words are present in your final translation. Thanks!
##              (These are used to insert HTML5 underlining tags, to mark accesskeys
##              for disabled users.)
            ${_("""%sJ%sust give me bridges!""") % ("""<u>""", """</u>""")}
            </button>
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

<!-- BEGIN "Advanced Options" panel for bridge type -->
<div class="container-fluid"
     style="width: 96%; align: center; margin-left: 2%; margin-right: 2%;">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">${_("""Advanced Options""")}</h3>
    </div>

    <!-- BEGIN bridge options selection form -->
    <form class="form-horizontal" id="advancedOptions" action="bridges" method="GET">
      <fieldset>
        <div class="container-fluid" id="instructions" style="align-content: left;">
          <legend style="font-size: 112%">
            <br />
            <p>${_(strings.OPTIONS[0])}</p>
          </legend>
        </div>

        <div class="container-fluid">
          <!-- BEGIN first options row -->
          <div class="row" style="width: 98%; height: inherit; margin: auto;">

            <!-- BEGIN left column, first row -->
            <div class="container-fluid col-lg-2"
                 style="float: left; width: 50%; height: inherit;">
              <div class="step" style="height: inherit;">
                <div class="form-group">
                  <label class="control-label"
                         for="transport"
                          style="text-align: inherit;">
                    ${_(strings.OPTIONS[2]) % ("Pluggable <u>T</u>ransport")}
                  </label>
                  <div class="container-fluid col-lg-4">
                    <div class="btn-group" style="float: left; padding: 2%;">
                      <select class="btn btn-primary btn-sm dropdown"
                              form="advancedOptions"
                              id="transport"
                              name="transport"
                              data-toggle="dropdown"
                              type="button"
                              accesskey="t">
                        ${_("""No""")}
<option label="none"  value="0"        >${_("none")}</option>
<option label="obfs2" value="obfs2"              >obfs2</option>
<option label="obfs3" value="obfs3"   selected   >obfs3</option>
<option label="obfs4" value="obfs4"              >obfs4</option>
<option label="scramblesuit" value="scramblesuit">scramblesuit</option>
<option label="fte"   value="fte"                >fteproxy</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div> <!-- END left column, first row -->

            <!-- BEGIN right column, first row -->
            <div class="container-fluid col-lg-2"
                 style="float: right; width: 50%; height: inherit;">
              <div class="step"
                   style="height: inherit; margin-right: 1%;">
                <div class="form-group">
                  <label class="control-label"
                         for="ipv6"
                         style="text-align: inherit;">
                    ${_(strings.OPTIONS[1])}
                  </label>
                  <div class="container-fluid col-lg-4">
                    <div class="checkbox"
                         style="float: left;">
                      <div class="input-group"
                           style="float: left; padding: 2%;">
                        <input name="ipv6"
                               id="ipv6"
                               form="advancedOptions"
                               type="checkbox"
                               value="yes"
                               accesskey="y" />
## TRANSLATORS: Please make sure the '%s' surrounding single letters at the
##              beginning of words are present in your final translation. Thanks!
## TRANSLATORS: Translate "Yes!" as in "Yes! I do need IPv6 addresses."
                          ${_("""%sY%ses!""") % ("<u>", "</u>")}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>  <!-- END left column, first row -->
          </div>

        </div> <!-- END first row -->
      </fieldset>

      <!-- BEGIN second options row -->
      <div class="row"
           style="width: 98%; height: inherit;
                  margin-left: auto; margin-right: auto; padding: 2%;">
        <div class="container-fluid col-lg-2"
             style="width: 50%; text-align: center;">
          <p>
            <button class="btn btn-primary btn-lg btn-block"
                    accesskey="g">
## TRANSLATORS: Please make sure the '%s' surrounding single letters at the
##              beginning of words are present in your final translation. Thanks!
## TRANSLATORS: Please do NOT translate the word "bridge"!
              ${_("""%sG%set Bridges""") % ("<u>", "</u>")}
            </button>
          </p>
        </div>
      </div>
    </form> <!-- END bridge options selection form -->
  </div> <!-- END advanced options panel (a.k.a. the lined boxy thing --
           -- surrounding the options)                                -->
</div>
<br />
<hr>
