{% import "layouts/macros.jinja2" as macros %}
{% extends "layouts/base-server.jinja2" %}

{% block head %}
  {{ super() }}
{% endblock %}

{% block content %}
  {% call macros.header(version) %}{% endcall %}
  <main>
    <div class="section no-pad-bot" id="index-banner">
      <div class="container">
        <br><br>
        <h2 class="header center">Simple Backup for Home Assistant</h1>
        <div class="row center">
          <h6 class="header col s12 light">A simple way to upload Home Assistant backups to 
              <a href="https://drive.google.com/drive/my-drive">Google Drive&trade;</a>.  Keep your backups secured in Google's 
              highly redundant and super reliable infrastructure.  Stay safe!  You don't want a random hard drive failure to keep you from turning on your lights.
          </h5>
        </div>
        <div class="row">
          <div>
            <ul class="browser-default" style="display:table; margin:0 auto;">
                <li>Super easy setup and install</li>
                <li>UI targeted towards new users or anyone sick of writing YAML files</li>
                <li>Privacy-centric design philosophy</li>
                <li>Highly configurable</li>
                <li><a href="https://github.com/sabeechen/hassio-google-drive-backup#configuration">Thorough documentation</a></li>
            </ul>
          </div>
        </div>
        <div class="row center">
          <div id="option1" class="col m12 l6 offset-l3 center center-align">
            <a target="_blank" id="authenticate-button" style="margin: 10px" href="https://github.com/sabeechen/hassio-google-drive-backup#detailed-install-instructions" class="btn-large btn-flat btn-high-vis">
              <i class="material-icons">assignment</i>
              Installation Instructions
            </a>

          </div>
          <div id="option2" class="col s12 m6 offset-m3 default-hidden">
            Follow the <a target="_blank"
              href="https://github.com/sabeechen/hassio-google-drive-backup/blob/master/LOCAL_AUTH.md">instructions
              here</a> to get your own client ID and client secret from Google. This is a much more complicated and time
            consuming approach, but doesn't require you to authenticate yourself with an external domain.
            <br />
          </div>
        </div>
        <br><br>
      </div>
    </div>
  </main>
{% endblock %}