<!--Body container that sets layout and inner content-->

<div class="u-padding">

  [% INCLUDE ssl_inspection/menu.html section = "android" %]

  <p>
    [% i18n("This network employs a technology called captive portal which allows the administrator(s) to restrict network access to trusted users. In order to prevent certificate security warnings when accessing this portal, the network's filtering unit must issue to your computer or mobile device a file called an SSL certificate.") %]
  </p>
  <p>
    [% i18n("This guide will help you install the SSL filtering certificate for Android-based mobile devices, including the Nexus, Galaxy, Droid, and Evo, as well as several other phones and tablets. This guide is not primarily for district owned Android devices.") | none %]
  </p>

  <h3 class="number"><span>[% i18n("Step") %] </span>1</h3>

  <p>
    [% i18n("Download the certificate to your device.") | none %]
  </p>

  <div class="o-layout o-layout--center u-padding-bottom">
    <div class="o-layout__item u-1/1 u-2/3@tablet u-3/5@desktop">
      <a href="[% ssl_path %]" class="c-btn c-btn--secondary u-1/1">[% i18n('Download Certificate') %]</a>
    </div>
  </div>

  <h3 class="number"><span>[% i18n("Step") %] </span>2</h3>

  <div class="o-layout o-layout--center u-padding-bottom">
    <div class="o-layout__item u-1/1 u-2/3@tablet u-3/5@desktop">
      <img src="/common/ssl_inspection/android-01-certificate-name.png" alt="[% i18n('Android certificate name prompt') %]" >
    </div>
  </div>

  <p>
    [% i18n("You will be prompted to enter a name for the certificate. Enter a meaningful name for this network and click <i>OK</i>.") | none %]
  </p>

  <div class="o-media o-media--notice u-padding-small u-padding@desktop u-margin-bottom">
    <div class="o-media__img">[% flashIcon(level='notice', size='tiny') %]</div>
    <p class="o-media__body">
      [% i18n("Android devices vary greatly, so you may not see exactly the same thing if you are using another device or a different version of Android; however, the general process and wording should be the same.") %]
    </p>
  </div>


  <h3 class="number"><span>[% i18n("Step") %] </span>3</h3>

  <p>
    [% i18n("Depending on your device and its configuration, you may be prompted to enter your device PIN. If you don't have a PIN set, you maybe prompted to create one.") %]
  </p>

  <h3 class="number"><span>[% i18n("Step") %] </span>4</h3>

  <div class="o-layout o-layout--center u-padding-bottom">
    <div class="o-layout__item u-1/1 u-2/3@tablet u-3/5@desktop">
      <img src="/common/ssl_inspection/android-02-installed.png" alt="[% i18n('Android certificate installation confirmation') %]" >
    </div>
  </div>

  <p>
    [% i18n("You will see a confirmation that the certificate has been installed. In your notifications, it might say <i>Network may be monitored by an unknown third party</i>. That is normal and should be ignored.") | none %]
  </p>

  <h3 class="number"><span>[% i18n("Step") %] </span>5</h3>

  <p>
    [% i18n("You're done! You may continue browsing as usual; in most cases, you will not notice anything different after the certificate is installed.") %]
  </p>

</div>

[% INCLUDE ssl_inspection/common.html %]

</div>
