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

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

{% block breadcrumbs %}{% endblock %}

{% block left_sidebar %}
  {% set tree_top = pages|selectattr("html", "defined_and_equalto", "docs.html")|first %}
  {% include 'component-tree-nav.html.jinja' %}
{% endblock %}

{% block main %}
<div class="landing page-docs landing-builtin-bg overflow-hidden styled-page">
  <section class="text-center title-space">
    <div class="col-lg-9 mx-auto text-center">
      <div class="d-flex flex-column-reverse">
        <h1 class="">{% trans %}XRP Ledger Developer Resources{% endtrans %}</h1>
        <h6 class="eyebrow mb-3">{% trans %}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, linkText, imgClass) %}
    <div class="card video-image flat-card">
      <img 
        class="mb-2 {{imgClass}}"
        alt={{title}}
      />
      <h5 class="row">
        <a href="{{href}}" class="nav-link">{{ title }}</a>
      </h5>
      <p class="row faded-text flat-card-padding">
        {{ description }}
      </p>
      <div class="col align-button-on-bottom">
        {{ primaryButton(href, linkText, false) }}
      </div>
    </div>
  {% endmacro %}

  {% macro videoCard(url, title, src)%}
    <div class="col">
      <iframe id="video1" style="display:none;" src="{{url}}" title="{{title}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <a href="{{url}}" id="playvideo" class="btn1" data-url={{url}}>
        <img
          class="get-started-img video-image"
          id={{title}}
          src={{src}}
        />
      </a>

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

  {% macro useCasesCard(subItems, title, imgClass, id) %}
    <div class="col">
      <img
        class="use-cases-img img-fluid mb-2 shadow {{imgClass}}"
        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-links">
      <a href="{{ link }}">
        <h6 class="btn-arrow">{{ title }}</h6>
      </a>
      <p> {{ description }}</p>
    </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 = [
      {
        "src": "/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",
      },
      {
        "src": "/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",
      },
      {
        "src": "/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": "On-Chain Finance",
      "id": "on-chain-finance-use-cases",
      "imgClass": "wallet-illustration",
      "subItems": [
        {
          "description": "Trade on the decentralized exchange",
          "link": "https://xrpl.org/trade-in-the-decentralized-exchange.html",
        },
        {
          "description": "Make payments",
          "link": "https://xrpl.org/send-xrp.html",
        },
        {
          "description": "Use specialized payment types",
          "link": "https://xrpl.org/use-specialized-payment-types.html"
        }
      ],
    },
    {
      "title": "Tokens",
      "id": "token-use-cases",
      "imgClass": "token-illustration",
      "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": "Payments",
      "id": "payments-use-cases",
      "imgClass": "connections-illustration",
      "subItems": [
        {
          "description": "Peer to peer payments",
          "link": "https://xrpl.org/direct-xrp-payments.html",
        },
        {
          "description": "Cross-currency payments",
          "link": "https://xrpl.org/cross-currency-payments.html",
        },
        {
          "description": "Escrows",
          "link": "https://xrpl.org/escrow.html",
        },
      ],
    },
  ]
  %}
  {%
    set getStartedVideos = [
    {
      "src": "/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",
    },
    {
      "src": "/assets/img/backgrounds/docs-accounts@2x.png",
      "title": "Accounts",
      "url": "https://www.youtube.com/embed/eO8jE6PftX8?rel=0&amp;showinfo=0&amp;autoplay=1",
    },
    {
      "src": "/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",
    },
    {
      "src": "/assets/img/backgrounds/docs-tokenization@2x.png",
      "title": "Tokenization",
      "url": "https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&amp;showinfo=0&amp;autoplay=1",
    },
    ]
  %}
  {%
    set devTools = [
    {
      "title": "Faucets",
      "link": "https://xrpl.org/xrp-testnet-faucet.html",
      "description":
        "Get credentials and test-XRP for XRP Ledger Testnet or Devnet.",
    },
    {
      "title": "WebSocket Tool",
      "link": "https://xrpl.org/websocket-api-tool.html",
      "description":
        "Send sample requests and get responses from the rippled API.",
    },
    {
      "title": "XRP Ledger Explorer",
      "link": "https://livenet.xrpl.org",
      "description":
        "View validations of new ledger versions in real-time, chart the location of servers in the XRP Ledger.",
    },
    {
      "title": "Transaction Sender",
      "link": "https://xrpl.org/tx-sender.html",
      "description":
        "Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address.",
    },
  ]
  %}

  <section class="container-new py-26">
    <div class="nav card-grid flat-card-grid card-grid-3xN">
      <div class="col">
        {{ flatCard("./concepts/", 
                    "Concepts", 
                    "Learn the \"what\" and the \"why\" behind fundamental aspects of the XRP Ledger.", 
                    "Read the Docs",
                    "concepts-doc-illustration") }}
      </div>
      <div class="col">
        {{ flatCard("./tutorials/", 
                    "Tutorials", 
                    "Get step-by-step guidance to perform common tasks with the XRP Ledger.", 
                    "View Tutorials",
                    "tutorial-illustration") }}
      </div>
      <div class="col">
        {{ flatCard("./references/", 
                    "References", 
                    "Look up reference documentation for the XRP Ledger protocol, API methods, and more.", 
                    "View References",
                    "ref-book-illustration") }}
      </div>
    </div>
  </section>

  <section class="container-new py-26">
    <h4 class="pb-4">Use Cases</h4>
    <div class="card-grid card-grid-3xN use-cases">
      {% for useCase in useCases %}
        {{ useCasesCard(useCase.subItems, useCase.title, useCase.imgClass, useCase.id)}}
      {% endfor %}
    </div>
  </section>

  <section class="container-new py-26">
    <h4 class="pb-4">Getting Started</h4>
    <div class="card-grid card-grid-2xN quickstart-card">
      <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-3">
            <a
              class="btn btn-primary btn-arrow get-started-button"
              href="./tutorials/quickstart/"
            >
              Get Started
            </a>
          </div>
          <img
            alt="quick-start"
            id="quick-start-img"
            class="quickstart-image"
          />
        </div>
      </div>
      <div class="col">
        <div class="card-grid card-grid-2xN video-grid">
          {% set test = "/assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png"%}
          {% for video in getStartedVideos %}
            {{ videoCard(video.url, video.title, video.src) }}
          {% endfor %}
        </div>
        <div class="align-button-on-bottom">
          {{ primaryButton("https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi", "Watch Full Series", true) }}
        </div>
      </div>
    </div>
  </section>

  <section class="container-new py-26">
    <div class="d-flex flex-column-reverse col-sm-8 p-0">
      <h3 class="h4 h2-sm">Interact with the XRP Ledger in a language of your choice</h3>
      <h6 class="eyebrow mb-3">Explore SDKs</h6>
    </div>
    <div class="card-grid card-grid-2xN">
      <div class="col">
        <div class="card-grid langs-cards card-grid-2xN mt-10" id="langs-cards">
          <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 center-image">
        <img
          src="/assets/img/backgrounds/sdk-black.png"
          class="img-fluid sdk-img"
        />
      </div>
    </div>
  </section>

  <section class="container-new py-26">
    <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.src) }}
      {% endfor %}
    </div>
  </section>

  <section class="container-new py-26">
    <div class="card-grid card-grid-2xN">
      <div class="col d-flex align-items-center justify-content-center">
        <img
          class="dev-tools-img"
        >
      </div>
      <div class="col explore-links">
        <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 py-26" id="docs-browse-by">
    <div class="row card-grid card-grid-2xN">
      <div class="col" 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">
        <div class="card cta-card p-8-sm p-10-until-sm br-8">
          <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>
    </div>
  </section><!-- Browse by recommended and Generate Testnet Credentials -->
</div>
{% 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 %}