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

{% block mainclasses %}landing page-docs-index landing-builtin-bg{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block main %}

  <section class="py-26 text-center">
    <div class="col-xl-4 col-lg-6 mx-auto text-center">
      <div class="d-flex flex-column-reverse w-100">
        <h1 class="mb-18">{% trans %}What Would You Like to Learn?{% endtrans %}</h1>
        <h6 class="eyebrow mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
      </div>
    </div>
  </section>

  {# Macros #}
  {% macro primaryButton(href, text, isArrowUp) %}
    {% if isArrowUp %}
      <a class="btn btn-primary btn-arrow-up" id="{{href}}-button" href="{{href}}">{{ text }}</a>
    {% else %}
      <a class="btn btn-primary btn-arrow" id="{{href}}-button" href="{{href}}">{{ text }}</a>
    {% endif %}
  {% endmacro %}

  {% macro flatCard(href, title, description, image, isImageAbove) %}
     {# TODO: #}
  {% endmacro %}

  {% macro videoCard(url, title, image)%}
    <div class="col">
      <a class="btn1" data-url={{url}}>
        <img
          class="get-started-img video-image"
          id={{title}}
          src={{img}}
        />
      </a>

      <h6 class="pt-3">{{ title }}</h6>
    </div>
  {% endmacro %}

  {% macro useCasesCard(subItems, title, image, id) %}
    <div class="col">
      <img
        class="use-cases-img img-fluid mb-2 shadow"
        src={{image}}
        alt="{{title}}"
        id={{id}}
      >
      <h5 class="mt-4">{{title}} </h5>
      <ul class="nav flex-column">
      {% for item in subItems %}
        <li class="nav-item"><a href="{{item.link}}" class="nav-link">{{item.description}}</a>
      {% endfor %}
      </ul>
    </div>
  {% endmacro %}

  {% macro devToolsCard(link, title, description) %}
    <div class="col dev-tools-link">
      <a href="{{ link }}">
        <h6 class="btn-arrow">{{ title }}</h6>
        <p> {{ description }}</p>
      </a>
    </div>
  {% endmacro %}


  {% set recommendedPages = [
      {
        "description": _("rippled API Reference"),
        "link": "https://xrpl.org/manage-the-rippled-server.html",
      },
      {
        "description": _("XRP Faucet"),
        "link": "https://xrpl.org/xrp-testnet-faucet.html",
      },
      {
        "description": _("Getting Started with Python"),
        "link": "https://xrpl.org/get-started-using-python.html#get-started-using-python",
      },
      {
        "description": _("Websocket API Tool"),
        "link": "https://xrpl.org/websocket-api-tool.html",
      },
      { "description": _("XRP Ledger Explorer"), "link": "https://livenet.xrpl.org" },
  ] %}

  {%
    set intermediateVideos = [
      {
        "img": "/assets/img/backgrounds/docs-advanced-payment-features@2x.png",
        "title": "Advanced Payment Features",
        "url": "https://www.youtube.com/embed/e2Iwsk37LMk?rel=0&amp;showinfo=0&amp;autoplay=1",
      },
      {
        "img": "/assets/img/backgrounds/docs-governance@2x.png",
        "title": "Governance and the Amendment Process",
        "url": "https://www.youtube.com/embed/4GbRdanHoR4?rel=0&amp;showinfo=0&amp;autoplay=1",
      },
      {
        "img": "/assets/img/backgrounds/docs-sidechains@2x.png",
        "title": "Federated Sidechains",
        "url": "https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&amp;showinfo=0&amp;autoplay=1",
      },
    ]
  %}
  {% set useCases = [
    {
      "title": "Build a Wallet",
      "id": "build-a-wallet",
      "img": "/assets/img/backgrounds/docs-wallet@2x.png",
      "subItems": [
        {
          "description": "Use Specialized Payment Types",
          "link": "https://xrpl.org/use-specialized-payment-types.html",
        },
        {
          "description": "Build a Desktop Wallet in Python",
          "link": "https://xrpl.org/build-a-desktop-wallet-in-python.html",
        },
      ],
    },
    {
      "title": "NFTs",
      "id": "nfts",
      "img": "/assets/img/backgrounds/docs-nft@2x.png",
      "subItems": [
        {
          "description": "NFT Conceptual Overview",
          "link": "https://xrpl.org/non-fungible-tokens.html",
        },
        {
          "description": "NFToken Format",
          "link": "https://xrpl.org/nftoken.html",
        },
        {
          "description": "NFToken Tester Tutorial",
          "link": "https://xrpl.org/nftoken-tester-tutorial.html",
        },
      ],
    },
    {
      "title": "Run an XRP Ledger Node",
      "id": "run-an-xrp-ledger-node",
      "img": "/assets/img/backgrounds/docs-node@2x.png",
      "subItems": [
        {
          "description": "About the Server",
          "link": "https://xrpl.org/xrpl-servers.html",
        },
        {
          "description": "Install & Configure",
          "link": "https://xrpl.org/install-rippled.html",
        },
        {
          "description": "Run a Validator Node",
          "link": "https://xrpl.org/run-rippled-as-a-validator.html",
        },
      ],
    },
  ]
  %}
  {%
    set getStartedVideos = [
    {
      "img": "/assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png",
      "title": "Intro to XRP Ledger",
      "url": "https://www.youtube.com/embed/sVTybJ3cNyo?rel=0&amp;showinfo=0&amp;autoplay=1",
    },
    {
      "img": "/assets/img/backgrounds/docs-accounts@2x.png",
      "title": "Accounts",
      "url": "https://www.youtube.com/embed/eO8jE6PftX8?rel=0&amp;showinfo=0&amp;autoplay=1",
    },
    {
      "img": "/assets/img/backgrounds/docs-decentralized-exchange@2x.png",
      "title": "Decentralized Exchange",
      "url": "https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&amp;showinfo=0&amp;autoplay=1",
    },
    {
      "img": "/assets/img/backgrounds/docs-tokenization@2x.png",
      "title": "Tokenization",
      "url": "https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&amp;showinfo=0&amp;autoplay=1",
    },
    ]
  %}

  {# TODO: Add the FlatCards section at the top #}

  <section class="py-26 px-20 text-left">
    <div class="card-grid card-grid-2xN">
      <div class="col">
        <h6>Explore SDKs</h6>
        <h4>Interact with the XRP Ledger in a language of your choice</h4>
        <div class="card-grid langs-cards card-grid-2xN mt-10">
          <div class="col langs">
            <a href="https://xrpl.org/get-started-using-javascript.html">
              <img
                src="/assets/img/logos/javascript.svg"
                class="circled-logo"
              >
              <h5 class="btn-arrow">Javascript</h5>
            </a>
          </div>
          <div class="col langs">
            <a href="https://xrpl.org/get-started-using-python.html">
              <img
                src="/assets/img/logos/python.svg"
                class="circled-logo"
              >
              <h5 class="btn-arrow">Python</h5>
            </a>
          </div>
          <div class="col langs">
            <a href="https://xrpl.org/get-started-using-java.html">
              <img
                src="/assets/img/logos/java.svg"
                class="circled-logo"
              >
              <h5 class="btn-arrow">Java</h5>
            </a>
          </div>
        </div>
      </div>
      <div class="col">
        <img
          src="/assets/img/backgrounds/sdk-black.png"
          class="img-fluid pt-20 sdk-img"
        />
      </div>
    </div>
  </section>

  <section class="py-15 px-20 text-left">
    <h4 class="pb-4">Use Cases</h4>
    <div class="card-grid card-grid-3xN">
      {% for useCase in useCases %}
        {{ useCasesCard(useCase.subItems, useCase.title, useCase.image, useCase.id)}}
      {% endfor %}
    </div>
  </section>

  <section class="py-10 px-20 text-left">
    <div class="mx-auto mb-10">
      <h4>Getting Started with XRP Ledger</h4>
    </div>
    <div class="card-grid card-grid-2xN">
      <div class="col">
        <div class="card video-image">
          <h5 class="mt-7"> Quickstart to XRP Ledger </h5>
          <p class="mb-8 mt-4">
            An introduction to fundamental aspects of the XRP Ledger.
          </p>
          <div class="dg-lg-block mb-5">
            <a
              class="btn btn-primary btn-arrow get-started-button"
              href="./tutorials/quickstart/"
            >
              Get Started
            </a>
          </div>
          <img
            src="/assets/img/backgrounds/docs-quick-start.svg"
            alt="quick-start"
            id="quick-start-img"
          />
        </div>
      </div>
      <div class="col">
        <div class="card-grid card-grid-2xN">
          {% for video in getStartedVideos %}
            {{ videoCard(video.url, video.title, video.image) }}
          {% endfor %}
        </div>
        {{ primaryButton("https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi", "Watch Full Series", true) }}
      </div>
    </div>
  </section>

  <section class="py-26 px-20 text-left">
    <h4 class="pb-4">Intermediate Learning Sources</h4>
    <div class="card-grid card-grid-3xN">
      {% for video in intermediateVideos %}
        {{ videoCard(video.url, video.title, video.image) }}
      {% endfor %}
    </div>
  </section>

  <section class="py-26 px-20 text-left">
    <div class="card-grid card-grid-2xN">
      <div class="col d-flex align-items-center justify-content-center">
        <img
          src="/assets/img/backgrounds/docs-devtools-@2x.png"
          class="dev-tools-img"
        >
      </div>
      <div class="col">
        <div class="d-flex flex-column-reverse w-100">
          <h4 class="mb-10">Explore, Test, Verify</h4>
          <h6 class="mb-3">Explore Dev Tools</h6>
        </div>
        <p class="mb-20">
          Use these web-based tools to assist during all stages of
          development, from getting your first payment to testing your
          implementation for best practices.{" "}
        </p>
        <div class="card-grid card-grid-2xN">
          {% for card in devTools %}
            {{ devToolsCard(card.link, card.title, card.description) }}
          {% endfor %}
        </div>
        {{ primaryButton("https://xrpl.org/dev-tools.html", "View All tools", false) }}
      </div>
    </div>
  </section>

  <section class="container-new mb-50-until-sm" id="docs-browse-by">
    <div class="row">
      <div class="col-lg-6 mb-10" id="popular-topics">
        <h2 class="h4">{% trans %}Browse By Recommended Pages{% endtrans %}</h2>
        <ul class="nav flex-column">
          {% for page in recommendedPages %}
            <li class="nav-item"><a href="{{page.link}}" class="nav-link">{{page.description}}</a>
          {% endfor %}
        </ul>
      </div><!--/#popular-topics-->

      <div class="col-lg-6 p-6-sm p-10-until-sm br-8 cta-card">
        <img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
        <img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
        <div class="z-index-1 position-relative">
          <h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Have an Idea for a Tool?{% endtrans %}</h2>
          <p class="mb-10">{% trans %}Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.{% endtrans %}</p>
          <a class="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">Generate Testnet Credentials</a>
        </div>
      </div>
    </div>
  </section><!-- Browse by recommended and Generate Testnet Credentials -->

  {# TODO: Add the normal list of other pages to explore at the bottom of this one (About, Docs, Community, etc.)#}

{% endblock %}

{% block endbody %}

{% endblock %}

{% block analytics %}
    <script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "event": "page_info",
      "page_type": "Hub Page",
      "page_group": "Docs"
    })
    </script>
{% endblock analytics %}