cmsmanage/membershipworks/templates/membershipworks/upcoming_events.dj.html

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

{% load nh3_tags %}

{% block title %}Upcoming Events{% endblock %}
{% block content %}
  {% spaceless %}
    <div id="preview">
      <!-- wp:image {"align":"center","id":2319} -->
      <figure class="wp-block-image aligncenter">
        {# djlint:off H006 #}
        <img src="https://claremontmakerspace.org/wp-content/uploads/2019/03/CMS-Logo-b-y-g-300x168.png"
             alt="CMS Logo"
             class="wp-image-2319" />
        {# djlint:on #}
      </figure>
      <!-- /wp:image -->

      <!-- wp:paragraph -->
      <p>Greetings Upper Valley Makers:</p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph -->
      <p>We have an exciting list of upcoming classes at the Claremont MakerSpace that we think might interest you.</p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph -->
      <p>
        <strong>For most classes and events, CMS MEMBERSHIP IS NOT REQUIRED.</strong> That said, members receive a discount on registration and there are some classes/events that are for members only (this will be clearly noted in the event description).
      </p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph -->
      <p>
        <strong>Class policies</strong> (liability waiver, withdrawal, cancellation, etc.) can be found <a href="https://claremontmakerspace.org/class-policies/">here</a>.
      </p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph -->
      <p>
        <strong>Instructors:</strong> Interested in teaching a class at CMS? Please fill out our <a href="https://claremontmakerspace.org/cms-class-proposal-form/">Class Proposal Form</a>.
      </p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph -->
      <p>
        <strong>Tours:</strong> Want to see what the Claremont MakerSpace is all about?
        <a data-wpel-link="external"
           href="https://tickets.claremontmakerspace.org/open.php"
           target="_blank"
           rel="noreferrer noopener external">Contact Us</a> to schedule your tour where you can learn about all the awesome tools that the CMS offers access to, as well as how membership, classes, and studio spaces work.
      </p>
      <!-- /wp:paragraph -->

      <!-- wp:separator {"className":"is-style-wide"} -->
      <hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
      <!-- /wp:separator -->
      {% for section in event_sections %}
        {% if section.events %}
          <!-- wp:heading {"level":1} -->
          <h1 class="wp-block-heading">{{ section.title }}</h1>
          <!-- /wp:heading -->
          <!-- wp:heading {"level":4} -->
          <h4 class="wp-block-heading">
            <i>{{ section.blurb }}</i>
          </h4>
          <!-- /wp:heading -->

          {% for event in section.events %}
            {% with url="https://claremontmakerspace.org/events/#!event/register/"|add:event.url %}
              <!-- wp:group {"tagName":"section","layout":{"type":"constrained"}} -->
              <section class="wp-block-group">

                {% if "lgo" in event %}
                  <!-- wp:image {"width":"400px","height":"auto","sizeSlug":"large","linkDestination":"media","align":"{% cycle 'left' 'right' %}"} -->
                  <figure class="wp-block-image {% cycle 'alignleft' 'alignright' %} size-large is-resized">
                    <a href="{{ url }}">
                      {# djlint:off H006 #}
                      <img src="{{ event.lgo.l }}"
                           alt="Image for {{ event.ttl|nh3:"" }}"
                           style="width:400px;
                                  height:auto" />
                      {# djlint:on #}
                    </a>
                  </figure>
                  <!-- /wp:image -->
                {% endif %}

                <!-- wp:heading {"align":"center"} -->
                <h2 class="wp-block-heading">
                  <a href="{{ url }}">{{ event.ttl|nh3 }}</a>
                </h2>
                <!-- /wp:heading -->

                <!-- wp:paragraph -->
                <p>
                  {# wordpress is very annoying with spacing here #}
                  {# TODO: different dates probably implies multiple instances. Should read RRULE or similar from the event notes #}
                  {# djlint:off #}
                <i>{{ event.sdp_dt|date }} {{ event.sdp_dt|time }} &mdash; {% if event.sdp_dt.date != event.edp_dt.date %}{{ event.edp_dt|date }}{% endif %} {{ event.edp_dt|time }}</i>
                  {# djlint:on #}
                </p>
                <!-- /wp:paragraph -->
                {% if not section.truncate %}
                  <!-- wp:tadv/classic-paragraph -->
                  <div>{{ event.dtl|nh3:"a,abbr,acronym,b,blockquote,code,em,i,li,ol,strong,ul,p,span,br,div" }}</div>
                  <!-- /wp:tadv/classic-paragraph -->
                  <!-- wp:paragraph -->
                  <p>
                    <a href="{{ url }}">Register for this class now!</a>
                  </p>
                  <!-- /wp:paragraph -->
                {% endif %}
              </section>
              <!-- /wp:group -->
              <!-- wp:separator {"className":"is-style-wide"} -->
              <hr class="wp-block-separator has-alpha-channel-opacity is-style-wide aligncenter" />
              <!-- /wp:separator -->
            {% endwith %}
          {% endfor %}
        {% endif %}
      {% endfor %}

      <!-- wp:paragraph -->
      <p>Happy Makin’!</p>
      <!-- /wp:paragraph -->
      <!-- wp:paragraph -->
      <p>
        We are grateful for all of the public support that our 501(c)(3), non-profit organization receives. If you’d like to make a donation,please visit the <a href="https://claremontmakerspace.org/support/"><strong>Support Us page</strong></a> of our website.
      </p>
      <!-- /wp:paragraph -->
    </div>
  {% endspaceless %}
  <div class="position-fixed end-0 bottom-0">
    <button id="copy-button"
            type="button"
            class="btn btn-primary m-3"
            data-bs-toggle="popover"
            data-bs-content="Copied!">
      <i class="bi bi-clipboard-fill"></i> Copy to clipboard
    </button>
  </div>
{% endblock %}
{% block script %}
  <script>
    async function copyToClipboard(event) {
      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
      const data = new ClipboardItem({
        "text/plain": new Blob(
          [document.getElementById("preview").innerHTML], {
            type: "text/plain"
          })
      });
      await navigator.clipboard.write([data]);

      bootstrap.Popover.getInstance(event.target).show();
      setTimeout(() => bootstrap.Popover.getInstance(event.target).hide(), 1000);
    }
    const button = document.getElementById("copy-button");
    const popover = new bootstrap.Popover(button, {
      trigger: "manual"
    })
    button.addEventListener("click", copyToClipboard);
  </script>
{% endblock %}