{% extends base_generic %}
{% load static %}
{% block content %}

<ul class="list-group mr-auto">
  <li class="list-group-item">
      <a href="{% url 'rsshistory:wizard-setup-news' %}" id="btnFetchNews" class="btn btn-primary" role="button">Setup for News</a>
      <div class="text-muted">Setup best suited for RSS clients, news.</div>
  </li>

  <li class="list-group-item">
      <a href="{% url 'rsshistory:wizard-setup-gallery' %}" id="btnFetchGallery" class="btn btn-primary" role="button">Setup for Gallery</a>
      <div class="text-muted">Setup best suited for YouTube-like players, tiktoks, image galleries.</div>
  </li>

  <li class="list-group-item">
      <a href="{% url 'rsshistory:wizard-setup-search-engine' %}" id="btnFetchSearchEngine" class="btn btn-primary" role="button">Setup for Search Engine</a>
      <div class="text-muted">Setup best suited for Google like Search engines.</div>
  </li>

  <li class="list-group-item">
      <a href="{% url 'rsshistory:configuration-advanced' %}" title="Instance configuration" class="btn btn-primary" role="button">
          <img src="{% static 'rsshistory/icons/icons8-configuration-67.png' %}" class="content-icon" />
          Advanced configuration
      </a>
      <div class="text-muted">See all available options.</div>
  </li>

<script>
    $("#btnFetchNews").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
      );
    });

    $("#btnFetchGallery").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
      );
    });

    $("#btnFetchSearchEngine").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
      );
    });
</script>

{% endblock %}