{% 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 event-hero card-grid-2xN">
    <div class="col order-2 order-lg-1 pr-2">
      <div class="d-flex flex-column-reverse">
        <h2 class="h4 h2-sm mb-8">{% trans %}Annual Summit: Apex{% endtrans %}</h2>
      </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="pt-2 mt-5 mb-5 event-save-date">More info about Apex 2022 coming soon!</div>
      {# <div class="event-small-gray py-2 mb-5" >
        September 29–30, 2022<br />
        Las Vegas
      </div> #}
      <div class="d-lg-block">
        <a class="btn btn-primary btn-arrow" target="_blank" href="http://apexdevsummit.com">{% trans %}Explore Apex{% endtrans %}</a> 
      </div>
    </div>

    <div class="col order-1 order-lg-2 pt-5 pr-2">
        <div id="event-hero-image" src="" class=""></div>
    </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-hero2@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 %}Apex 2021 On-Demand{% endtrans %}</h2>
      </div>
      <p class="mb-4">{% trans %}View sessions from the Apex 2021 stages in Las Vegas and Tallinn. Relive the keynote fireside chat with Alexis Ohanian and soak in the knowledge that was shared by passionate XRPL community members.{% endtrans %}</p>
      
      <div class="event-small-gray py-2 my-5" >
        September 29–30, 2021<br />
        Las Vegas, Estonia
      </div>
      
      <div class="d-lg-block">
        <a class="btn btn-primary btn-arrow" target="_blank" href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZgnreb8ODgxJW032M9Z2XZ">{% trans %}Watch Sessions 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="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": "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-upcoming",
      "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-upcoming",
      "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-upcoming",
      "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-upcoming",
      "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-upcoming",
      "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-upcoming",
      "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": "XRPL Community Meetup: Abu Dhabi",
      "id": "upcoming-xrpl-abu-dhabi",
      "description": "Get together with other Abu Dhabi-based members of the XRP Ledger Community to network and discuss all things XRPL!",
      "type": "meetup-upcoming",
      "link": "https://www.meetup.com/xrp-ledger-dubai-community/events/284776939/",
      "location": "NYU Abu Dhabi, Building A6",
      "date": "April 14th 2022",
      "image": "event-meetup-abu-dhabi@2x.jpg"},

      
  ] %}
  <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="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": "XRPL 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": "XRPL Hackathon: New Year, New NFT",
      "id": "upcoming-xrpl-hackathon-new-year",
      "description": "Build functional NFTs on the XRPL that span across a full range of use cases and showcase your project in this hackathon. Submissions have a chance to win prizes from a total prize pool of $50,000 in XRP.",
      "type": "meetup-past",
      "link": "https://xrplnft.devpost.com/",
      "location": "Virtual",
      "date": "January 31 - March 14, 2022",
      "image": "event-hack-new-year.svg"},
  ] %}
  <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>

  $('#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();
    }
  });

  $('#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 %}