{% extends "base.html.jinja" %}

{% block mainclasses %}landing landing-children padded-main{% endblock %}

{% set categoriesTutorials = [
  {
    "id": "beginner",
    "title": "Beginner Tutorials",
    "description": "",
    "children": [
      {
        "title": "Quickstart",
        "description": "This Quickstart tutorial walks you through a test harness interface to try out the XRP Ledger.",
        "href": "xrpl-quickstart.html",
        "img": "",
      },
    ]
  },
  {
    "id": "sdk",
    "title": "Get started with SDKs",
    "description": "These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using SDKs.",
    "children": [
      {
        "title": "Python",
        "description": "Using xrpl.py, a pure Python library.",
        "href": "get-started-using-python.html",
        "img": "./assets/img/logos/python.svg",
      },
      {
        "title": "Java",
        "description": "Using xrpl4j, a pure Java library.",
        "href": "get-started-using-java.html",
        "img": "./assets/img/logos/java.svg",
      },
      {
        "title": "Javascript",
        "description": "Using the xrpl.js client library.",
        "href": "get-started-using-javascript.html",
        "img": "./assets/img/logos/javascript.svg",
      },
      {
        "title": "HTTP & Websocket APIs",
        "description": "Access the XRP Ledger directly through the APIs of its core server.",
        "href": "http-websocket-apis.html",
        "img": "./assets/img/logos/globe.svg",
      },
    ]
  },
  {
    "id": "use-cases",
    "title": "XRP Ledger Use Cases",
    "description": "",
    "children": [
      {
        "title": "Payments",
        "description": "Send and receive payments on the XRP Ledger.",
        "href": "payment.html",
        "img": "",
      },
      {
        "title": "Tokens",
        "description": "Create and trade fungible and non-fungible tokens on the XRP Ledger.",
        "href": "tokens.html",
        "img": "",
      },
    ]
  },
  {
    "id": "servers",
    "title": "Manage the XRP Ledger Servers",
    "description": "",
    "children": [
      {
        "title": "Install rippled Server",
        "description": "These tutorials describe the steps to install and update the core XRP Ledger server.",
        "href": "install-rippled.html",
        "img": "",
        "external": true,
      },
      {
        "title": "Configure rippled Server",
        "description": "These tutorials describe the steps to customize your <code>rippled</code> server configuration.",
        "href": "configure-rippled.html",
        "img": "",
        "external": true,
      },
      {
        "title": "Run rippled in Standalone Mode",
        "description": "These tutorials describe the steps to run <code>rippled</code> in stand-alone mode and test features without a full network.",
        "href": "use-stand-alone-mode.html",
        "img": "",
        "external": true,
      },
      {
        "title": "Install Clio Server",
        "description": "This tutorial describes the steps to install the Clio server on Ubuntu platform.",
        "href": "install-clio-on-ubuntu.html",
        "img": "",
      },
    ]
  },
  {
    "id": "businesses",
    "title": "XRP Ledger Businesses",
    "description": "This section demonstrates how to follow various best practices for running businesses that interface with the XRP Ledger, such as exchanges listing XRP and gateways issuing currency in the XRP Ledger.",
    "children": [
      {
        "title": "List XRP as an Exchange",
        "description": "Run a digital asset exchange? Follow these steps to add XRP.",
        "href": "list-xrp-as-an-exchange.html",
        "img": "",
      },
      {
        "title": "Become a Stablecoin Issuer",
        "description": "Stablecoin issuers link tokens in the XRP Ledger to assets in the outside world.",
        "href": "become-an-xrp-ledger-gateway.html#become-a-stablecoin-issuer",
        "img": "",
      },
    ]
  },
]%}

{% block right_sidebar %}
  <div class="tutorial-sidebar">
    <a class="with-caret expander collapsed d-lg-none" id="toc-expander" role="button" data-toggle="collapse" data-target="#page-toc-wrapper" aria-expanded="false">
      Page Toolbar
      <span class="chevron"><span></span><span></span></span>
    </a>
    <div id="page-toc-wrapper" class="collapse d-lg-block">
      <ul class="page-toc nav flex-column" role="directory">
          <li class="nav-item"><a class="nav-link" href="#main-page-header">Tutorials</a></li>
          {% for c in categoriesTutorials %}
          <li class="nav-item"><a class="nav-link" href="#{{c.id}}">{{c.title}}</a></li>
          {% endfor %}
        </ul>
    </div>
  </div>
{% endblock %}

{% block main %}
  {% if content %}

  <section class="pt-3 p-md-3">
    <article class="content">
      {{ content }}

      {% set show_blurbs = True %}
      {% set depth= 1 %}
      {% include 'children.html' %}
    </article>
  </section>

  {% else %}
  <section class="pt-3 p-md-3">
    <article class="content">
      <h1 id="main-page-header">{{ currentpage.name }}</h1>
      {% if currentpage.blurb != target.blurb %}<p class="blurb">{{ currentpage.blurb }}</p>{% endif %}
      {% set show_blurbs = True %}
      {% set depth= 1 %}
      {% macro tutorialCard(title, description, href, img, external) %}
        <a class="card float-up-on-hover" href="{{href}}" target="_blank">
            <div class="card-body">
              {% if img %}
              <div class="card-icon-container">
                <img src="{{img}}" alt="{{title}} Screenshot" />
              </div>
              {% endif %}
              {% if external %}
              <h4 class="card-title h5 nav-link external-link">{{title}}</h4>
              {% else %}
              <h4 class="card-title h5">{{title}}</h4>
              {% endif %}
              
              <p class="card-text">{{description}}</p>
            </div>
            <div class="card-footer">&nbsp;</div>
          </a>
      {% endmacro %}

      <div class="tutorial-content">
        {% for category in categoriesTutorials %}
        <h5 id="{{category.id}}">{{category.title}}</h5>
        <p>{{category.description}}</p>
        <div id="{{category.id}}-cards" class="card-grid card-grid-3xN tutorial-card-grid">
          {% for child in category.children %}
          {{ tutorialCard(child.title, child.description, child.href, child.img, child.external)}}
          {% endfor %}
        </div>
        {% endfor %}
      </div>
    </article>
  </section>
  {% endif %}
{% endblock %}

{% block analytics %}
{% from "macro-get_funnel.jinja" import get_funnel %}
    <script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "event": "page_info",
      "page_type": "Hub Page",
      "page_group": "Docs",
      "page_funnel": "{{get_funnel(pages, currentpage)}}",
      "page_labels": {{currentpage.labels or []}}
    })
    </script>
{% endblock analytics %}