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

{% block bodyclasses %}no-sidebar{% endblock %}
{% block mainclasses %}landing page-community{% endblock %}

{% block main %}
<div class="">

<section class="py-26">
  <div class="col-lg-8 mx-auto text-lg-center">
    <div class="d-flex flex-column-reverse">

      <h1 class="mb-0">{% trans %}Start Building with Example Code{% endtrans %}</h1>
      <h6 class="eyebrow mb-3">{% trans %}Code Samples{% endtrans %}</h6>
    </div>
{#    <a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a> #}
  </div>
</section>

<div class="position-relative d-none-sm">
    <img src="./img/backgrounds/xrpl-overview-orange.svg" id="xrpl-overview-orange">
  </div>

<section class="container-new py-26">
  <div class="d-flex flex-column col-sm-8 p-0">
    <h3 class="h4 h2-sm">{% trans %}Browse sample code for building common use cases on the XRP Ledger{% endtrans %}</h3>
  </div>

  <div class="row col-12  card-deck mt-10" id="code-samples-deck">

    {% set code_samples = all_code_samples() %}

    {% set lang_icons = {
      "cli": "assets/img/logos/cli.svg",
      "go": "assets/img/logos/golang.svg",
      "java": "assets/img/logos/java.svg",
      "js": "assets/img/logos/javascript.svg",
      "py": "assets/img/logos/python.svg",
      "http": "assets/img/logos/globe.svg",
    } %}

  <div class="row col-md-12 px-0" id="code_samples_list">
    {% for card in code_samples %}
      <a class="card cardtest col-12 col-lg-5 {% for lang in card.langs %} lang_{{lang}} {% endfor %} " href="{{target.github_forkurl}}/tree/{{target.github_branch}}/{{card.href}}">
        <div class="card-header">
        {% for lang in card.langs %}
          <span class="circled-logo"><img src="{{lang_icons[lang]}}" /></span>
        {% endfor %}
        </div>
        <div class="card-body">
          <h4 class="card-title h5">{{card.title}}</h4>
          <p class="card-text">{{card.description}}</p>
        </div>
        <div class="card-footer">&nbsp;</div>
      </a>
    {% endfor %}
    </div>
  </div>
</section>

<section class="container-new py-26">
  <div>

    <div class="d-flex flex-column">
      <h3 class="h4 h2-sm pb-4">{% trans %}Contribute Code Samples{% endtrans %}</h3>
      <h6 class="eyebrow mb-20">{% trans %}Help the XRPL community by submitting your<br> own code samples{% endtrans %}</h6>
    </div>

    <div class="row pl-4">
      <div class=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_1"><span class="dot"></span><h5 class="pb-4 pt-md-5">Fork and clone</h5><p class="pb-4">Fork the <a href="{{target.github_forkurl}}">xrpl-dev-portal repo</a>. Using git, clone the fork to your computer.</p></div>
      <div class=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_2"><span class="dot"></span><h5 class="pb-4 pt-md-5">Add to folder</h5><p class="pb-4">Add your sample code to the <code>content/_code-samples/</code> folder. Be sure to include a <code>README.md</code> that summarizes what it does and anything else people should know about it.</p></div>
      <div class=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_3"><span class="dot"></span><h5 class="pb-4 pt-md-5">Commit and push</h5><p class="pb-4">Commit your changes and push them to your fork on GitHub.</p></div>
      <div class=" col-lg-3 pl-4 pl-lg-0 pr-2 contribute  dot contribute_4 mb-4"><span class="dot"></span><h5 class="pb-4 pt-md-5">Open a pull request</h5><p class="pb-0 mb-0">Open a pull request to the original repo. Maintainers will review your submission and suggest changes if necessary. If the code sample is helpful, it’ll be merged and added to XRPL.org!</p></div>
    </div>

    {#<a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a>#}

  </div>
</section>

</div>
{% endblock %}


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


{% block bottom_left_sidebar %}
{% set lang_text = {
      "cli": "CLI",
      "go": "go",
      "java": "Java",
      "js": "JavaScript",
      "py": "Python",
      "http": "HTTP",
    } %}

<div class="p-2 mt-30">
    <form >
    <p>Code Language</p>
        <div>
            <input type="radio" name="langs" id="input_all" value="All" checked> <label for="input_all">All</label>
        </div>
        {% for lang in all_langs %}
            <div class="single_lang">
                <input type="radio" name="langs" id="input_{{lang}}" value="{{lang}}">
                <label for="input_{{lang}}">{{lang_text[lang]}}</label>
            </div>
        {% endfor %}
    </form>
</div>

<br><br>
{% endblock %}

{% block endbody %}
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/code-samples.js"></script>
{% endblock %}