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

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

  </div>
</div>

<script type="text/javascript">
  // Takes one argument, `element`, which should be a string specifying the id
  // of the element whose text should be selected.
  function selectText(element) {
    try {
      var doc = document;
      text = doc.getElementById(element);
      var range;
      var selection;

      if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    } catch (e) {
      window.alert(e);
    }
  }

  function displayOrHide(element) {
    try {
      e = document.getElementById(element);

      if (e.style.display === 'none') {
        document.getElementById(element).style.display = 'block';
      } else if (e.style.display === 'block') {
        document.getElementById(element).style.display = 'none';
      }
    } catch (e) {
      window.alert(e);
    }
  }
</script>

<div class="container-narrow">
  <div class="container-fluid">

% if answer:
    <div class="container-fluid"
         style="width: 98%; align: center; margin: auto;">
      <div class="container-fluid"
           style="padding: 2%">
        <h2>${_(strings.BRIDGES[0])}</h2>
      </div>
    </div>

    <div class="container-fluid"
         style="width: auto; align: center; margin: auto;
                position: relative; left: 0%;"
         onclick="selectText('bridgelines')">
      <div class="row" id="bridgesrow1">
        <div class="col col-lg-12">
          <div class="bridge-lines" id="bridgelines">
${answer.replace("\n", "<br />")}
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid"
         style="width: 100%; align: center; margin: auto;">
      <div class="row" id="bridgesrow2" style="text-align: right; padding-right: 7%;">
        <button class="btn btn-primary disabled" id="selectbtn"
                onclick="selectText('bridgelines')"
                title="Select all bridge lines">
          <i class="icon icon-2x icon-paste"></i> &nbsp; ${_("""Select All""")}
        </button>
% if qrcode:
        <a class="btn btn-primary" type="button" id="qrcodebtn"
           href="${qrcode}" title="Show QRCode for bridge lines"
           onclick="displayOrHide('qrcode')">
          <i class="icon icon-2x icon-qrcode"></i> &nbsp; ${_("""Show QRCode""")}
        </a>
% endif
      </div>

      <div class="modal" id="qrcode" style="display: none;">
        <div class="modal-dialog modal-sm" style="width: 400px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" aria-hidden="true"
                      onclick="displayOrHide('qrcode')">
                &times;
              </button>
              <h4 class="modal-title">${_("""QRCode for your bridge lines""")}</h4>
            </div>
            <div class="modal-body">
% if qrcode:
              <p style="text-align: center;">
                <img width="350" height="350"
                     title="QRCode for your bridge lines from BridgeDB"
                     src="${qrcode}" />
              </p>
% else:
              <p class="text-danger">
## TRANSLATORS: Please translate this into some silly way to say
##              "There was a problem!" in your language. For example,
##              for Italian, you might translate this into "Mama mia!",
##              or for French: "Sacrebleu!". :)
${_("""Uh oh, spaghettios!""")}
${_("""It seems there was an error getting your QRCode.""")}
                <i class="icon icon-frown"></i>
              </p>
% endif
              <p>
${_("""This QRCode contains your bridge lines. Scan it with a QRCode """ \
    """reader to copy your bridge lines onto mobile and other devices.""")}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <br />
    <br />

<div class="container-fluid"
     style="width: 100%; align: center; margin: auto;">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">${_(strings.HOWTO_TBB[0])}</h3>
    </div>
    <br />

    <div class="container-fluid" id="howto" style="align-content: left;">
      <p>
        ${_(strings.HOWTO_TBB[1]) % \
           ("""<a href="https://www.torproject.org/projects/torbrowser.html"
                  target="_blank">""",
            """</a>""")}
        ${_(strings.HOWTO_TBB[2])}
      </p>
      <br />
      <div class="bs-component">
        <blockquote>
          <p>
            ${_(strings.HOWTO_TBB[3])}
          </p>
        </blockquote>
      </div>
      <p>
        ${_(strings.HOWTO_TBB[4])}
      </p>
    </div>
  </div>
</div>

% else:
<div class="bs-component" style="width: 80%; margin: auto;">
  <div class="alert alert-dismissable alert-danger">
    <p style="text-align: center; font-size: 115%;">
      <br />
      <strong>
        <em class="primary">
## TRANSLATORS: Please translate this into some silly way to say
##              "There was a problem!" in your language. For example,
##              for Italian, you might translate this into "Mama mia!",
##              or for French: "Sacrebleu!". :)
${_("""Uh oh, spaghettios!""")}
        </em>
      </strong>
      <br />
    </p>
    <p style="text-align: center;">
      ${_("""There currently aren't any bridges available...""")}
      ${_(""" Perhaps you should try %s going back %s and choosing a""" \
          """ different bridge type!""") % \
         ("""<a class="alert-link" href="options">""", """</a>""")}
    </p>
  </div>
</div>
<br />
% endif

<script type="text/javascript">
  // Make the 'Select All' button clickable:
  document.getElementById('selectbtn').className = "btn btn-primary";

  // Remove the href attribute which opens the QRCode image as a data URL if
  // JS is disabled:
  document.getElementById('qrcodebtn').removeAttribute('href');
</script>

<hr />