{% extends "layouts/base.jinja2" %}

{% block head %}
{% include 'layouts/partials/icons.jinja2' %}
{{ super() }}
<script type="text/javascript">
  $(document).ready(function () {
    processStatusUpdate(bootstrap_update_data);
    // Every 5 seconds, refresh the metrics form the server.
    window.setInterval(refreshstats, 5000);
  });
</script>
{% endblock %}

{% block content %}
<div id="source-template" style="display: none;">
  <div class="source-ui">
    <h6 style="display: flex; align-items: center; margin-top: 0;">
      <svg class="source-icon">
        <use xlink:href="#dummy" />
      </svg>
      <span>
        <b class="source_backup_count"></b>
        <span class="source_title"></span>
      </span>
    </h6>
    <ul class="browser-default" style="margin-top: 5px; margin-bottom: 20px;">
      <li class="source_retain_label">
        <span class="source_retain_count"></span> saved indefinitely
      </li>
      <li class="source_free_space">
        <span class="source_free_space_text"></span>
        <i class="source_free_space_tooltip tooltipped material-icons backup-help-icon">info</i>
      </li>
      <li class="source_ignored_label">
        <span class="source_ignored_count"></span> ignored (<span class="source_ignored_size"></span>)
      </li>
      <li class="source-detail-label">
        <span class="source-detail"></span>
      </li>
    </ul>
  </div>
</div>
<div id="backup-template" style="display: none">
  <div class="backup-ui col s12 m12 l6 xl6">
    <div id="backup_card" onclick="showDetails(this);return false;" class="card">
      <div class="snapshot-card">
        <div style="display: flex; align-items: center;">
          <div class="archive-icon">
            <i class="large material-icons backup_icon" style="font-size: 30px;"></i>
            <div id="loading" class="progress default-hidden" style="position: absolute;">
              <div class="indeterminate"></div>
            </div>
          </div>
          <div style="min-width: 0;">
            <h7 id="name" class="truncate" style="font-weight: 600;"></h7>
            <div>
              <i class="material-icons backup-card-icon icon-retain tooltipped danger-text" data-position="bottom"
                data-tooltip="This backup is kept indefinitely until you delete it.">lock</i>
              <i class="material-icons backup-card-icon icon-warn-delete tooltipped" data-position="bottom"
    
                data-tooltip="">warning</i>
              <i class="material-icons backup-card-icon icon-protected tooltipped blue-icon" data-position="bottom"
                data-tooltip="This backup is password protected">vpn_key</i>
              <i class="material-icons backup-card-icon tooltipped" id="gen_detail" data-position="bottom" 
                data-tooltip="Override">date_range</i>
              <span id="size"></span>
              -
              <span>
                <span id="status"></span>
                <i class="material-icons tooltipped backup-help-icon" id="status-help"
                  data-position="bottom" data-tooltip="error">help</i>
              </span>
            </div>
            <div id="type"></div>
            <div id="createdAt"></div>
            <div id="note" style="font-style: italic;" class="truncate tooltipped" data-position="bottom" data-tooltip=""></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='error' style='display:none' id="toast">You shouldn't see this</div>

<main style="margin: 0 1rem;">
  <div style="margin: 20px auto; max-width: 1400px;">
    <div class="row" style="margin-bottom: 0;">
      <div class="col s12 m5 l4 xl3">
        <h5>Backup Statistics</h5>
        <div style="margin-top: 20px;">
          <div id="sources">
          </div>
          <div class="divider"></div>
          <p style="display: flex; align-items: center;">
            <i class="material-icons" style="margin-right: 6px;">timer</i>
            <span>
              Last Backup <time datetime="" title="" id="last_backup" style="font-weight: 600;"></time>
            </span>
          </p>
          <p style="display: flex; align-items: center;">
            <i class="material-icons" style="margin-right: 6px;">update</i>
            <span>
              Next Backup in <time datetime="" title="" id="next_backup" style="font-weight: 600;"></time>
            </span>
          </p>
        </div>
      </div>

      <div class="col s12 m7 l8 xl9 row">
        {% include 'layouts/partials/error-messages.jinja2' %}

        <div class="card default-hidden question-card s12" id="error_reports_card">
          <div class="card-content">
            <span class="card-title">
              <i class="material-icons">info_outline</i>
              <span>Share Error Reports?</span>
            </span>
            <p>If you select yes, the text of unexpected exceptions this add-on produces will be sent to a server
              maintained by the developer. This is completely optional, but helps give him a heads up for problems
              with new releases and aids in providing better help messages when things go wrong. If you're unsure,
              just select "No". You can always change this in the settings menu up on the top right of the page.</p>
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="errorReports('true');"><i class="material-icons">check</i>Yes</a>
            <a target="_blank" class="btn-flat" onClick="errorReports('false');"><i class="material-icons">close</i>No</a>
          </div>
        </div>

        <div class="card default-hidden question-card s12" id="backup_upgrade_card">
          <div class="card-content">
            <span class="card-title">
              <i class="material-icons">info_outline</i>
              <span>'Snapshots' have been renamed to 'Backups'</span>
            </span>
            <p>In August 2021 <a href="https://www.home-assistant.io/blog/2021/08/24/supervisor-update/" target="_blank">the Home Assistant 
              team announced</a> that 'snapshots' will be called 'backups' moving forward.  This addon exposes a
              binary sensor to indicate if snapshots are stale and another sensor that publishes details about backups.  Both of the sensors
              used 'snapshot' in their names and values, so they had to be changed to match the new language.  In the spirit of "not breaking 
              your stuff" the addon will only start using the new names and values if you tell it to, just in case you have automations or UI 
              using the old sensor names/values.
              <ul class="browser-default">
                <li>If you don't have any automations based on these sensors, you can just click 'Use the new names and values'.</li>
                <li>If you do, you can either dismiss this message or update your automations/UI to use the new names and values.</li>
                <li>You can look at <a target="_blank" rel="noreferrer"
                  href="https://github.com/sabeechen/hassio-google-drive-backup/blob/master/hassio-google-drive-backup/BACKUP_AND_SNAPSHOT.md">this document</a> to see exactly how the sensors have changed.</li>
                <li>You can change this later in the <a href="#!" onclick="loadSettings()"><i class="material-icons inline-icon">settings</i>add-on
                  settings</a> if you choose.  Look for it under "Uncommon Options"</li>
              </ul>
            </p>
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="callBackupSnapshot('true');"><i class="material-icons">check</i>Use the new names and values</a>
            <a target="_blank" class="btn-flat" onClick="callBackupSnapshot('false');"><i class="material-icons">close</i>Keep them as-is</a>
          </div>
        </div>

        <div class="card s12 default-hidden question-card" id="warn_upgrade_backups_card">
          <div class="card-content">
            <span class="card-title">
              <i class="material-icons">info_outline</i>
              <span>Ignoring upgrade backups is recommended</span>
            </span>
            <p>With your current settings, this addon assumes any backup it finds should be uploaded to Google Drive.  This can create undesirable behavior when you upgrade
              Home Assistant or an addon and an automatic partial backup is created by Home Assistant for the upgrade (this is Home Assistant's default behavior).  
              <div class="card">
                <div class="card-content">
                  <span class="card-title mini-title">For Example</span>
                  If you save 4 full backups in Google Drive and then upgrade 4 add-ons, the 4 partial backups Home Assistant automatically creates would overwrite ALL of the full backups this add-on made previously leaving you with no 
                  full backups to restore from until the next one is made 24 hours or more later.  Most people don't want that to happen, as it leaves a possible gap in your backup strategy.
                </div>
              </div>
            </p>
            <p>
              To prevent this most people enable the "Ignore upgrade backups" setting in this addon, which will cause it to completely ignore these partial upgrade backups.
              Moving forward this will be enabled by default for new installations, and it is recommended for everyone.  Because you're upgrading from an 
              older version of the addon that had different behavior, you have to choose.  You can also enable some other features in the <a href="#!" onclick="loadSettings()"><i class="material-icons inline-icon">settings</i>add-on settings</a> that might be useful for this, such as:
              <ul class="browser-default">
                <li>The setting <b>'Delete ignored backups after: X'</b> can be used to automatically delete upgrade backups after some time period, which helps reclaim the space they might use.</li>
                <li>The <b>'Ignore Other Backups'</b> setting makes the addon ignore <i>any</i> backup it didn't create, including 'upgrade' backups.</li>
              </ul>
              If none of this makes any sense to you, just click "Start ignoring upgrade backups" below to make this notification go away.
            </p>
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="loadSettings();"><i class="material-icons">settings</i>Open Settings</a>
            <a target="_blank" class="btn-flat" onClick="dismissIgnoredBackupWarning('true');"><i class="material-icons">check</i>Start ignoring upgrade backups</a>
            <a target="_blank" class="btn-flat" onClick="dismissIgnoredBackupWarning('false');"><i class="material-icons">close</i>Keep current settings</a>
          </div>
        </div>

        <div class="card s12 default-hidden question-card" id="warn_creds_deprecated_card">
          <div class="card-content">
            <span class="card-title">
              <i class="material-icons">info_outline</i>
              <span>Your credentials with Google may expire</span>
            </span>
            <p>Google <a href="https://developers.googleblog.com/2022/02/making-oauth-flows-safer.html" target="_blank" rel="noreferrer">recently announced</a> changes they're making 
              to how their OAuth credentials are generated.  You previously followed 
              <a href="https://github.com/sabeechen/hassio-google-drive-backup/blob/master/LOCAL_AUTH.md" target="_blank" rel="noreferrer">these instructions</a> to set up credentials
               the add-on can use to upload to Google Drive.  If you did that before <b>March 16 2022</b>, Google is going to make those credentials invalid in <b>October of 2022</b>.
               If you are affected this means that in October 2022 the add-on will be unable to authorize with Google Drive and your backups will not get uploaded.  
            </p>
            <p>
              While annoying, this change is also somewhat expected.  Using Google Cloud credentials for a local installation like this is not something Google 'intended' for us to do, it isn't an officially supported way of using their services. We can still make do though.  
            </p>
            <p>
              If you are affected, you likely received an email from Google titled 'Migrate your OAuth out-of-band flow'.  To make your credentials work, please follow the steps linked here to 
              <a href="https://github.com/sabeechen/hassio-google-drive-backup/blob/master/LOCAL_AUTH.md" target="_blank" rel="noreferrer">make your credentials</a> and reauthorize the addon.  
              You don't need to follow all the steps exactly; you just need to modify what you have to match up with the instructions.  In particular please ensure that:
              <ul class="browser-default">
                <li>You can skip steps 0, 1, and 2 because you already did them</li>
                <li>In step 3, ensure your "OAuth Consent Screen" has a Publishing status of "In production".  You don't need to create a new consent screen.</li>
                <li>In step 4, ensure your credentials use application type "TVs and Limited Input Devices".  If not, you will need to create new credentials, which will create a new client ID and client secret you can use to reauthorize the addon.</li>
              </ul>

              Once you do, please <a href="reauthenticate?private=1"></i>reauthorize</a> the add-on with Google Drive.  You can also wait until your credentials stop working and regenerate them then.  There is no rush.
            </p>
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="aknowledgeooboauth();"><i class="material-icons">check</i>Acknowledge (you won't see this message again)</a>
          </div>
        </div>
        
        <div class="card default-hidden question-card" id="ingress_upgrade_card">
          <div class="card-content">
            <span class="card-title">Use Ingress instead?</span>
            <p>The latest version of this add-on supports <a target="_blank" rel="noreferrer"
                href="https://www.home-assistant.io/blog/2019/04/15/hassio-ingress/">ingress</a>. Ingress allows
              this web interface to be embedded within Home Assistant, which is usually more secure because it
              delegates authentication to the same mechanisms you've configured in Home Assistant (e.g. SSL and
              username/password). Currently this interface is being served on an additional port outside of
              Home Assistant which is less secure.</p>
            <br />
            <p><b>Select YES</b> to only use ingress to access this interface. This is recommended, as ingress is
              almost always more secure.
              In the future you can access this interface by following the "WEB UI" link from the add-on
              installation page or embedding it in
              your Home Assistant sidebar from the same place.</p>
            <br />
            <p><b>Select NO</b> to continue exposing a web interface on an open port with the SSL and authentication
              settings you choose. The port, which defaults to 1627, can be changed from the add-on page in Home
              Assistant.</p>
            <br />
            <p>You can change this option any time from the settings menu. No matter which you choose, the interface
              will be available through ingress.</p>
            <br />
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="exposeServer('false');"><i class="material-icons">check</i>Yes</a>
            <a target="_blank" class="btn-flat" onClick="exposeServer('true');"><i class="material-icons">close</i>No</a>
          </div>
        </div>
        <div class="card default-hidden" id="restore_help_card">
          <div class="card-content">
            <span class="card-title">Restore a Backup</span>
            <p>Backups must be restored through the supervisor Backups page. You can restore a backup by
              navigating to
              "Settings" &gt; "System" &gt; "Backups" from the Home Assistant Web-UI,
              or by clicking the button below to navigate there by a direct link. Depending on how you access the Home
              Assistant Web-UI the direct link may not work, so you'll just have to navigate there.</p>
          </div>
          <div class="card-action">
            <a target="_blank" id="restore_hard_link" class="btn-flat"><i class="material-icons">open_in_new</i>Open Backups</a>
            <a target="_blank" class="btn-flat modal-close" onClick="$('#restore_help_card').fadeOut(500)"><i class="material-icons">close</i>Dismiss</a>
          </div>
        </div>
        <div class="card default-hidden question-card" id="ignore_helper_card">
          <div class="card-content">
            <span class="card-title">
              <i class="material-icons">info_outline</i>
              <span>Double check your ignored backups</span>
            </span>
            <p>Because this addon gets a limited view of the world, it might not be able to accurately determine if all of your older backups were created by the addon.  
              Its recommended that you check below to ensure that all of the backups the addon is ignoring now are the ones you intend to have ignored.
              If not, you can click on an ignored backups to see its details and click "Don't ignore" to have the addon include them in future backup, clean-up, etc.</p>
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="toggleLinkSlide(this, 'backups_ignored');"><i class="material-icons">remove_red_eye</i>Show/Hide Ignored Backups</a>
            <a target="_blank" class="btn-flat" onClick="ackCheckIgnoredBackups();"><i class="material-icons">check</i>Acknowledged</a>
          </div>
        </div>
        <div class="card default-hidden question-card" id="backups_boot_waiting_card">
          <div class="card-content">
            <span class="card-title">
              <i class="material-icons">timer</i>
              <span>Taking a backup soon</span>
            </span>
            <p>Since the addon just started up a few minutes ago, it's going to wait a few minutes before taking a backup to make sure that's what you want.  Look below to see exactly how long before the next backup.  
              You can wait for that to happen, change your <a href="#!" onclick="loadSettings()"><i class="material-icons inline-icon">settings</i>add-on
            settings</a> to something different, or just click the button below to let the automatic backup happen immediately.</p>
          </div>
          <div class="card-action">
            <a target="_blank" class="btn-flat" onClick="allowImmediateBackup();"><i class="material-icons">alarm_on</i>Backup Now</a>
          </div>
        </div>
        <div class="default-hidden" id="no_backups_block">
          <div class="row">
            <div class='col s1'></div>
            <div class='col s2 valign-wrapper center'>
              <i class='material-icons' style="font-size: 90px">info_outline</i>
            </div>
            <div class='col s7 center valign-wrapper' style="margin-top: 10px;">
              <p>You don't have any backups in Google Drive or Home Assistant yet.</p>
            </div>
          </div>
          <div class="divider"></div>
        </div>
        <div id="backups_loading">
          <div class="row">
            <div class='col s1'></div>
            <div class='col s2 valign-wrapper center'>
              <i class='material-icons' style="font-size: 90px">refresh</i>
            </div>
            <div class='col s7 center valign-wrapper' style="margin-top: 10px;">
              <p>Waiting for backups to load. If you don't see this go away soon, make sure the add-on is still
                running. Info on this page may be stale until then.</p>
            </div>
          </div>
          <div class="divider"></div>
        </div>
        <div id="backups" class="s12 row"></div>
        <div class="indent ignored_backup_slider">
          <a class="btn-flat" href="#" onclick="toggleLinkSlide(this, 'backups_ignored');"><i class="material-icons">expand_more</i> and <span class="ignored_backup_count"></span> ignored backup<span class="ignored_backup_plural">s</span></a>
        </div>
        <div id="backups_ignored" class="s12 row" style="display: none;"></div>
      </div>
    </div>
  </div>
</main>
{% endblock %}
