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

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

{% endblock %}

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

{% block breadcrumbs %}{% endblock %}

{% block main %}

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

<section class="py-26 text-center">
  <div class="col-lg-5 mx-auto text-center">
    <div class="d-flex flex-column-reverse">
      <h1 class="mb-0">{% trans %}Find the XRPL Community Around the World{% endtrans %}</h1>
      <h6 class="eyebrow mb-3">{% trans %}Events{% endtrans %}</h6>
    </div>
  </div>
</section>

<section class="container-new py-26">
  <div class="event-hero card-grid card-grid-2xN">
    
    <div class="col pr-2">
        <img src="./assets/img/events/event-hero3@2x.png" class="w-100">
    </div>
    
    <div class="col pt-5 pr-2">
      <div class="d-flex flex-column-reverse">
        <h2 class="h4 h2-sm mb-8">{% trans %}The XRPL Developer Summit<br /> On-Demand{% endtrans %}</h2>
        <h6 class="eyebrow mb-3">{% trans %}Apex{% endtrans %}</h6>
      </div>
      <p class="mb-4">{% trans %}Apex XRPL Developer Summit is the annual event where developers, contributors, and thought leaders come together to learn, build, share, network, and celebrate all things XRP Ledger.{% endtrans %}</p>
      
      <div class="event-small-gray py-2 my-5" >
        View all sessions from Apex 2022 and soak in the knowledge that was shared by passionate XRPL community members.
      </div>
      
      <div class="d-lg-block">
        <a class="btn btn-primary btn-arrow-out" target="_blank" href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZi8N1e_dTodg816QzKc9SX">{% trans %}View On-Demand{% endtrans %}</a> 
      </div>
    </div>
    
  </div>
</section>

{# Upcoming Events #}
<section class="container-new py-26" id="upcoming-events">
  <div class="d-flex flex-column-reverse col-lg-6 p-0 pr-lg-5 mb-4 pb-2">
    <h3 class="h4 h2-sm">{% trans %}Check out meetups, hackathons, and other events hosted by the XRPL Community{% endtrans %}</h3>
    <h6 class="eyebrow mb-3">{% trans %}Upcoming Events{% endtrans %}</h6>
  </div>

  <div class="filter row col-12 mt-lg-5 d-flex flex-column">
    <h6 class="mb-3">Filter By:</h6>
    <div>
      <div class="form-check form-check-inline">
        <input value="conference" id="conference-upcoming" name="conference-upcoming" type="checkbox" class="events-filter" checked />
        <label for="conference-upcoming">Conference</label>
      </div>
      <div class="form-check form-check-inline">
        <input value="meetup" id="meetup-upcoming" name="meetup-upcoming" type="checkbox" class="events-filter" checked />
        <label for="meetup-upcoming">Meetups</label>
      </div>
      <div class="form-check form-check-inline">
        <input value="hackathon" id="hackathon-upcoming" name="hackathon-upcoming" type="checkbox" class="events-filter" checked />
        <label for="hackathon-upcoming">Hackathons</label>
      </div>
    </div>
  </div>

  {% set upcoming = [
    
  { "name": "Hackathon:<br />NFT Launch Party",      
    "description": "Build Functional NFTs that span across a full range of use cases.",
    "type": "hackathon-upcoming",
    "link": "https://xrplnft.devpost.com/",
    "location": "Virtual",
    "date": "Oct 31 - Dec 12, 2022",
    "image": "event-hack-nft@2x.png"},
      
  ] %}

  <div class="row row-cols-1 row-cols-lg-3 card-deck mt-2">
  {% for event in upcoming %}
    <a class="event-card {{event.type}}" href="{{event.link}}" target="_blank">
      <div class="event-card-header" style="background: no-repeat url(assets/img/events/{{event.image}}); ">
        <div class="event-card-title">{{event.name}}</div>
      </div>
      <div class="event-card-body">
        <p>{{event.description}}</p>
      </div>
      <div class="mt-lg-auto event-card-footer d-flex flex-column">
        <span class="d-flex mb-2 icon icon-location">{{event.location}}</span>
        <span class="d-flex icon icon-date">{{event.date}}</span>
      </div>
    </a>
  {% endfor %}
  </div>
</section>

{# Past events #}
<section class="container-new pt-26" id="past-events">
  <div class="d-flex flex-column-reverse col-lg-6 p-0 pr-lg-5 mb-4 pb-2">
    <h3 class="h4 h2-sm">{% trans %}Explore past community-hosted events{% endtrans %}</h3>
    <h6 class="eyebrow mb-3">{% trans %}Past Events{% endtrans %}</h6>
  </div>

  <div class="filter row col-12 mt-lg-5 d-flex flex-column">
    <h6 class="mb-3">Filter By:</h6>
    <div>
      <div class="form-check form-check-inline">
        <input value="conference" id="conference-past" name="conference-past" type="checkbox" class="events-filter" checked />
        <label for="conference-past">Conference</label>
      </div>
      <div class="form-check form-check-inline">
        <input value="meetup" id="meetup-past" name="meetup-past" type="checkbox" class="events-filter" checked />
        <label for="meetup-past">Meetups</label>
      </div>
      <div class="form-check form-check-inline">
        <input value="hackathon" id="hackathon-past" name="hackathon-past" type="checkbox" class="events-filter" checked />
        <label for="hackathon-past">Hackathons</label>
      </div>
    </div>
  </div>


  {% set past = [
    { "name": "Hackathon: 2021",      
      "description": "Explore the exciting project submissions from the fall 2021 XRPL Hackathon that focused on the NFT and Hooks smart contract functionalities on the ledger.",
      "type": "hackathon-past",
      "link": "https://xrpl-hackathon-2021.devpost.com/project-gallery",
      "location": "Virtual",
      "date": "September 13-October 6, 2021",
      "image": "event-hack-2021.svg"},
      
    { "name": "XRPL Community Meetup: San Diego",      
      "description": "The first official Meetup hosted by the XRPL Community. Community members in Southern California gathered around a firepit and shared their experiences with the XRPL.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrpl-community/events/281806645/",
      "location": "San Diego, CA",
      "date": "Saturday, November 20, 2021",
      "image": "event-meetup-san-diego@2x.jpg"},

    { "name": "XRPL Community Meetup: Atlanta",      
      "description": "The inaugural Meetup in the Southeast region of the United States got community members excited to meet like-minded individuals in their area.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrpl-community/events/281980446/",
      "location": "Atlanta, GA",
      "date": "Saturday, November 27, 2021",
      "image": "event-meetup-alanta@2x.jpg"},

    { "name": "XRPL Community Meetup: San Francisco",      
      "description": "Community members in the Bay Area with diverse backgrounds in technology and beyond met in downtown San Francisco.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrpl-community/events/281806676/",
      "location": "San Francisco, CA",
      "date": "Monday, November 29, 2021",
      "image": "event-meetup-san-francisco@2x.jpg"},

    { "name": "XRPL Community Meetup: Miami",      
      "description": "One of the biggest Meetups held so far, this was the first of an ongoing series of local XRPL Community Meetup events in Miami. ",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrpl-community/events/281829463/",
      "location": "Miami, FL ",
      "date": "Thursday, December 9, 2021",
      "image": "event-meetup-miami@2x.jpg"},

    { "name": "XRPL Community Meetup: Nashville",      
      "description": "Nashville-based members of the XRPL Community came together to network, learn, share ideas, and form new partnerships. ",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrp-ledger-nashville-community/events/282538189/",
      "location": "Nashville, TN",
      "date": "Saturday, December 18, 2021",
      "image": "event-meetup-nashville@2x.jpg"},

    { "name": "NYC Meetup/Hackathon XRPL Celebration",
      "id": "upcoming-xrpl-new-york",
      "description": "The NYC/XRP community and Dev Null Productions cordially invites you to attend our 10th meetup, being held in celebration of the on-going XRPL Hackathon, at the unique and artistic TALS studio in Midtown Manhattan.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/NYC-XRP/events/284485901/",
      "location": "NYC, NY",
      "date": "March 30, 2022",
      "image": "event-meetup-new-york@2x.jpg"},
    
    { "name": "XRPL Community Meetup: London",
      "id": "upcoming-xrpl-london",
      "description": "Join for an evening of programming and networking with members of the XRPL Community in London, co-organised by Peerkat - the NFT platform for creators on the XRPL.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrp-ledger-london-community/events/283536458/",
      "location": "IDEALondon",
      "date": "March 31, 2022",
      "image": "event-meetup-london.png"},
      
    { "name": "XRPL Community Meetup: Toronto",
      "id": "upcoming-xrpl-toronto",
      "description": "Join us for our first Toronto meetup with an evening of programming and networking with other members of the XRP Ledger Community with special guests from the XUMM Wallet and ARK PLATES teams!",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrpl-toronto-community-meetup/events/284177188/",
      "location": "Toronto",
      "date": "March 31, 2022",
      "image": "event-meetup-toronto@2x.jpg"},
      
    { "name": "XRPL Community Meetup: San Diego",
      "id": "upcoming-xrpl-san-diego",
      "description": "Get together with other San Diego-based members of the XRP Ledger Community to network and discuss all things XRPL! Join us for our second San Diego XRPL Meetup.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrp-ledger-san-diego-community/events/284663355/",
      "location": "San Diego, CA",
      "date": "April 1st 2022",
      "image": "event-meetup-san-diego@2x.jpg"},

    { "name": "XRPL Community Meetup: Irvine LA",
      "id": "upcoming-xrpl-irvine",
      "description": "Get together with other LA-based members of the XRP Ledger Community to network and discuss all things XRPL.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrp-ledger-la-community-meetup/events/284824635/",
      "location": "UC Irvine, CA",
      "date": "April 3rd 2022",
      "image": "event-meetup-irvine@2x.jpg"},
      
    { "name": "XRPL Community Meetup: Miami #2",
      "id": "upcoming-xrpl-miami-2",
      "description": "We're excited to host our second Miami meetup for XRP Ledger community members on April 6th from 6-8pm, featuring Marco Neri, Developer Advocate at Ripple, who will join us to give a presentation on the XRP Ledger.",
      "type": "meetup-past",
      "link": "https://www.meetup.com/xrp-ledger-miami-community/events/284463736/",
      "location": "The LAB Miami, FL",
      "date": "April 6th 2022",
      "image": "event-meetup-miami@2x.jpg"},

    { "name": "Hackathon:<br />New Year, New NFT",
      "id": "upcoming-xrpl-hackathon-new-year",
      "description": "Build Functional NFTs that span across a full range of use cases.",
      "type": "hackathon-past",
      "link": "https://xrplnft2022.devpost.com/",
      "location": "Virtual",
      "date": "January 31 - March 14, 2022",
      "image": "event-hack-nft@2x.png"},

    { "name": "Hackathon: Creating Real World Impact",      
      "description": "Build apps to improve lives in the real world using any of the SDKs and APIs for the XRP Ledger.",
      "type": "hackathon-past",
      "link": "https://xrplimpact.devpost.com/",
      "location": "Virtual",
      "date": "May 26 - Jul 11, 2022",
      "image": "event-hack-nft@2x.png"},

    { "name": "Conference:<br />Apex 2021",      
      "description": "View sessions from the Apex 2021 stages in Las Vegas and Tallinn.",
      "type": "conference-past",
      "link": "https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZgnreb8ODgxJW032M9Z2XZ",
      "location": "Las Vegas, Tallinn",
      "date": "September 29-30, 2021",
      "image": "event-conference-apex-2021.png"},

  ] %}
  <div class="row row-cols-1 row-cols-lg-3 card-deck mb-0 mt-2 ">
  {% for event in past|reverse %}
    <a class="event-card {{event.type}}" href="{{event.link}}" target="_blank">
      <div class="event-card-header" style="background: no-repeat url(assets/img/events/{{event.image}}); ">
        <div class="event-card-title">{{event.name}}</div>
      </div>
      <div class="event-card-body">
        <p>{{event.description}}</p>
      </div>
      <div class="mt-lg-auto event-card-footer d-flex flex-column">
        <span class="d-flex mb-2 icon icon-location">{{event.location}}</span>
        <span class="d-flex icon icon-date">{{event.date}}</span>
      </div>
    </a>
  {% endfor %}
  </div>
</section>




<script>

  $('#conference-upcoming').change(function () {
    if ($('#conference-upcoming').is(':checked')) {
        $('.conference-upcoming').show();
    } else {
      $('.conference-upcoming').hide();
    }
  });
  $('#meetup-upcoming').change(function () {
    if ($('#meetup-upcoming').is(':checked')) {
        $('.meetup-upcoming').show();
    } else {
      $('.meetup-upcoming').hide();
    }
  });
  $('#hackathon-upcoming').change(function () {
    if ($('#hackathon-upcoming').is(':checked')) {
        $('.hackathon-upcoming').show();
    } else {
      $('.hackathon-upcoming').hide();
    }
  });

  $('#conference-past').change(function () {
    if ($('#conference-past').is(':checked')) {
        $('.conference-past').show();
    } else {
      $('.conference-past').hide();
    }
  });
  $('#meetup-past').change(function () {
    if ($('#meetup-past').is(':checked')) {
        $('.meetup-past').show();
    } else {
      $('.meetup-past').hide();
    }
  });
  $('#hackathon-past').change(function () {
    if ($('#hackathon-past').is(':checked')) {
        $('.hackathon-past').show();
    } else {
      $('.hackathon-past').hide();
    }
  });

</script>


{% endblock %}


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