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

<div class="u-padding">

  [% INCLUDE ssl_inspection/menu.html section = "osx" %]
  
  [% is_valid = application.request.user_agent.lower().match('safari|chrome|firefox|opera') %]

  [% IF !is_valid %]
  <div id="addMessage" class="o-media o-media--error u-padding u-margin-bottom">
    <div class="o-media__img">[% flashIcon(level=error) %]</div>
    <p class="o-media__body">
      <p>Due to Apple restrictions on the registration browser you're currently using you may not be able to complete the process below and may need to use another browser to complete the process (Safari, Chrome, Firefox, Opera, etc).</p>
      <p>In order to do so, close this window while making sure you select "Use Without Internet" if you are asked, and complete this process by visiting http://neverssl.com/ in your browser</p>
      <p>You can still attempt to follow the instructions below but you will likely be unable to download the certificate.</p>
    </p>
  </div>
  [% END %]

  <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 browsers which use macOS built-in Keychain facility — this includes Safari and Chrome. This guide is not primarily for district owned macOS computers.") %]
  </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/osx-01-downloads.png" alt="[% i18n('OS X Downloads icon') %]" >
    </div>
  </div>

  <p>
    [% i18n("When the certificate finishes downloading, it will appear in your default Downloads folder. Usually, this can be accessed via the Dock near the Trash icon, or, depending on your browser, it may appear in a dedicated downloads window. Locate the file and double-click to open it.") %]
  </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("You may not see exactly the same thing if you are using another browser or a different version of macOS; however, the general process and wording should be the same.") %]
    </p>
  </div>

  <h3 class="number"><span>[% i18n("Step") %] </span>3</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/osx-04-system-access.png" alt="[% i18n('OS X Keychain Access prompt') %]" >
    </div>
  </div>

  <p>
    [% i18n("Opening the file will launch the Keychain Access application; here, you maybe asked whether to add the certifitcate to the login keychain or the System keychain. It is preferred if the certificate is added to the System keychain in-case there are other users who might potentially login. Then click <i>Add</i>.") | none %]
  </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/osx-05-type-password-2.png" alt="[% i18n('OS X Keychain Access prompt') %]" >
    </div>
  </div>

  <p>
    [% i18n("Next, you might be prompted to enter in your login information to make the change. After entering your login information, click <i>Update Settings</i>.") | none %]
  </p>

  <h3 class="number"><span>[% i18n("Step") %] </span>5</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/osx-02-keychain-access.png" alt="[% i18n('OS X Keychain Access prompt') %]" >
    </div>
  </div>

  <p>
    [% i18n("Here, you will be asked whether to always trust Securly certificates. Click <i>Always Trust</i>.") | none %]
  </p>

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

  <div class="o-layout o-layout--center u-padding-bottom">
    <div class="o-layout__item u-1/1 u-3/5@tablet u-1/2@desktop">
      <img src="/common/ssl_inspection/osx-03-type-password.png" alt="[% i18n('OS X password prompt') %]" >
    </div>
  </div>

  <p>
    [% i18n("Next, you will be prompted to enter the user name and password you use to log on to the computer; do so, and click <i>Modify Keychain</i>.") | none %]
  </p>

  <h3 class="number"><span>[% i18n("Step") %] </span>7</h3>
  <p>
    [% i18n("You're done! After entering your password, you can close Keychain Access and continue browsing as usual; in most cases, you will not notice anything different after the certificate is installed.") %]
  </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("If you did not see the prompts mentioned above you will need to manually <i>Trust</i> the newly installed certificate. Continue with the following steps.") | none %]
    </p>
  </div>

  <h3 class="number"><span>[% i18n("Step") %] </span>A</h3>
  <p>
    [% i18n("Open up Keychain Access (<i>Finder > Applications > Utilities > Keychain Access</i>).") | 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">
      <img src="/common/ssl_inspection/osx/Applications-Utilities.png" alt="[% i18n('Utilities folder from the Finder') %]" >
    </div>
  </div>

  <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/osx/Utilities-KeychainAccess.png" alt="[% i18n('KeychainAccess application') %]" >
    </div>
  </div>
  <h3 class="number"><span>[% i18n("Step") %] </span>B</h3>

  <p>
    [% i18n("Make sure <i>System</i> is selected in the left column and then double click on your certificate.") | 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">
      <img src="/common/ssl_inspection/osx/KeychainAccess-certificate.png" alt="[% i18n('KeychainAccess') %]" >
    </div>
  </div>
  <h3 class="number"><span>[% i18n("Step") %] </span>C</h3>

  <p>
    [% i18n("Make sure <i>Trust</i> is expanded and select the dropdown next to <i>When using this certificate:</i> and change it to <i>Always Trust</i>.") | none %]
  </p>
  <p>
    [% i18n("You may now close the window.") %]
  </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">
      <img src="/common/ssl_inspection/osx/certificate-NotTrusted.png" alt="[% i18n('Certificate is not trusted') %]" >
    </div>
  </div>
  <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/osx/certificate-AlwaysTrust.png" alt="[% i18n('Always trust certificate') %]" >
    </div>
  </div>

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

  <p>
    [% i18n('You should now see a blue "+" right next to the certificate.') %]
  </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">
      <img src="/common/ssl_inspection/osx/certificate-Trusted.png" alt="[% i18n('Certificate is trusted') %]" >
    </div>
  </div>
  <h3 class="number"><span>[% i18n("Step") %] </span>E</h3>

  <p>
    [% i18n("You're done! You can close Keychain Access and 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>
