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

{% block mainclasses %}landing page-references{% endblock %}

{% block main %}
  <section class="py-20 text-center">
    <div class="col-xl-4 col-lg-6 mx-auto text-center">
      <div class="d-flex flex-column-reverse">
        <h1 class="mb-18">{% trans %}References and APIs{% endtrans %}</h1>
        <h6 class="eyebrow mb-3">{% trans %}Everything You Need to Know{% endtrans %}</h6>
      </div>
    </div>
  </section>

  <section class="container-new mb-30" id="refs-types">
    <div class="row row-cols-1 row-cols-lg-3 card-deck">
    {% for page in currentpage.children if not page.nav_omit and not page.html == "protocol-reference.html" %}
      <div class="card">
        <div class="card-body">
          <h4 class="card-title h5">
            <a href="{{page.html}}">
              {% if page.top_nav_name is defined %}{{page.top_nav_name}}{% else %}{{page.name}}{% endif %}
            </a>
          </h4>
          <p class="card-text">{{page.blurb}}</p>

        {% if page.curated_anchors is defined %}
          <div class="curated-links">
            <ul class="nav flex-column">
              {% for link in page.curated_anchors %}
              <li class="nav-item"><a class="nav-link" href="{{page.html}}{{link.anchor}}">{{link.name}}</a></li>
              {% endfor %}
            </ul>
          </div><!--/.curated-links-->
        {% else %}
          <ul class="nav flex-column">
          {% for child in page.children if not child.nav_omit %}
            <li class="nav-item"><a class="nav-link{% if '//' in child.html %} external-link{% endif %}" href="{{child.html}}">{{child.name}}</a></li>
          {% endfor %}
          </ul>
        {% endif %}
        </div><!--/.card-body-->
        <div class="card-footer">&nbsp;</div>
      </div><!--/.card-->
    {% endfor %}
    </div><!--/.card-deck-->
  </section>

  <section class="container-new mb-30" id="xrpl-protocol">
    {% set protocolref = pages|selectattr("html", "defined_and_equalto", "protocol-reference.html")|first %}
    <div class="d-flex flex-column-reverse col-sm-8 p-0">
      <h2 class="h4">{{protocolref.name}}</h2>
      <h6 class="eyebrow mb-3">{{protocolref.eyebrow_text}}</h6>
    </div>
    {% for row in protocolref.children|batch(4) %}
    <div class="row row-cols-1 row-cols-lg-4 card-deck">
      {% for page in row if not page.nav_omit %}
      {% if page.children or page.curated_anchors %}
      <div class="card">
        <div class="card-body">
          <h4 class="card-title h5">
            <a href="{{page.html}}">
              {% if page.top_nav_name is defined %}{{page.top_nav_name}}{% else %}{{page.name}}{% endif %}
            </a>
          </h4>
          <p class="card-text">{{page.blurb}}</p>

        {% if page.curated_anchors is defined %}
          <div class="curated-links">
            <ul class="nav flex-column">
              {% for link in page.curated_anchors %}
              <li class="nav-item"><a class="nav-link" href="{{page.html}}{{link.anchor}}">{{link.name}}</a></li>
              {% endfor %}
            </ul>
          </div><!--/.curated-links-->
        {% else %}
          <ul class="nav flex-column">
          {% for child in page.children if not child.nav_omit %}
            <li class="nav-item"><a class="nav-link{% if '//' in child.html %} external-link{% endif %}" href="{{child.html}}">{{child.name}}</a></li>
          {% endfor %}
          </ul>
        {% endif %}
        </div><!--/.card-body-->
        <div class="card-footer">&nbsp;</div>
      </div><!--/.card-->
      {% else %}
      <a class="card" href="{{page.html}}">
        <div class="card-body">
          <h4 class="card-title h5">
            {% if page.top_nav_name is defined %}{{page.top_nav_name}}{% else %}{{page.name}}{% endif %}
          </h4>
          <p class="card-text">{{page.blurb}}</p>
        </div>
        <div class="card-footer">&nbsp;</div>
      </a>
      {% endif %}
      {% endfor %}
    </div>
    {% endfor %}
    </div><!--/.card-deck-->
  </section>

{% 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 %}