{% extends "subscription-centre/base_subscription-centre.html" %}

{% block title %}Subscription centre{% endblock %}

{% block content %}
  <section class="p-strip--suru-topped">
    <div id="updated" class="p-strip u-no-padding--top">
      <div class="u-fixed-width">
        <div class="p-notification--positive u-no-margin--bottom">
          <div class="p-notification__content">
            <p class="p-notification__message">
              Your preferences have been successfully updated. <a href="#"
    alt="Close notification"
    onclick="location.href = document.referrer; return false;"><i class="p-notification__close">Close</i></a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <h1 class="p-heading--2 u-no-margin--bottom u-sv1">Subscription centre</h1>
        <p class="p-heading--5">Tailor your email preferences</p>
      </div>
      <div class="col-8">
        <div class="p-search-and-filter"
             id="subscription-centre-search"
             style="margin-bottom:1rem"
             aria-hidden="true"
             hidden>
          <button class="p-search-and-filter__clear" aria-hidden="true" hidden="">
            <i class="p-icon--close"></i>
          </button>
          <div class="p-search-and-filter__search-container"
               aria-expanded="true"
               data-active="true"
               data-empty="false">
            <div class="p-search-and-filter__box" data-overflowing="false">
              <label class="u-off-screen" for="search">Search and filter</label>
              <input autocomplete="off"
                     class="p-search-and-filter__input"
                     id="subscription-search"
                     name="search"
                     placeholder="Search and filter"
                     type="search"
                     value="" />
            </div>
          </div>

          <div class="p-search-and-filter__panel"
               aria-hidden="true"
               style="background:#f7f7f7;
                      padding-top:0"></div>

          <template id="search-result-template">
            <div class="p-search-and-filter__search-prompt" role="button" tabindex="0">
              <span class="p-search-and-filter__search-query"></span>
            </div>
          </template>
        </div>

        <form id="subscription-centre" method="post">
          <p>
            Select your areas of interest below to regularly receive informative emails about relevant product announcements, webinars and events, case studies, and more. You can update your preferences here anytime.
          </p>
          <label class="p-checkbox">
            <input id="general-updates"
                   type="checkbox"
                   aria-labelledby="generalUpdates"
                   class="p-checkbox__input"
                   name="generalUpdates"
                   value="true"
                   {% if updatesOptIn %}checked{% endif %} />
            <span class="p-checkbox__label">I agree to receive information about Canonical's products and services</span>
          </label>
          <hr style="margin-top:1rem;margin-bottom:0;" />
          <div class="p-accordion">
            <ul class="p-accordion__list" id="subscriptions-list">
              {% for category in categories %}
                <li class="p-accordion__group">
                  <div role="heading" aria-level="2" class="p-accordion__heading">
                    <button type="button"
                            class="p-accordion__tab"
                            id="tab{{ loop.index }}"
                            aria-controls="tab{{ loop.index }}-section"
                            aria-expanded="false">
                      <strong>{{ category }}</strong>
                    </button>
                  </div>
                  <section class="p-accordion__panel has-tick-elements"
                           id="tab{{ loop.index }}-section"
                           aria-controls="tab{{ loop.index }}-section"
                           aria-hidden="true">
                    <div class="row">
                      {% for tag in categories[category] %}
                        <div class="col-4">
                          <label class="p-checkbox">
                            <input type="checkbox"
                                   class="p-checkbox__input"
                                   name="tags"
                                   aria-labelledby="{{ tag }}"
                                   value="{{ tag }}"
                                   {% if interests is not none and tag in interests %}checked{% endif %} />
                            <span class="p-checkbox__label" id="{{ tag|lower }}">{{ tag }}</span>
                          </label>
                        </div>
                      {% endfor %}
                    </div>
                  </section>
                </li>
              {% endfor %}
            </ul>
          </div>

          <input id="return-url"
                 type="hidden"
                 aria-hidden="true"
                 aria-label="hidden field"
                 name="returnURL"
                 value="" />
        </form>
      </div>
    </div>
    <hr class="p-rule is-fixed-width u-no-margin--top"
        style="margin-bottom:1rem" />
    <div class="row">
      <div class="col-start-large-5">
        <span class="u-sv3">In submitting this form, I confirm that I have read and agree to <a href="/legal/data-privacy/newsletter">Canonical's Privacy Notice</a> and <a href="/legal/data-privacy">Privacy Policy</a>.</span>
      </div>
    </div>
    <div class="row">
      <div class="col-6 col-medium-3 col-small-2">
        <p>
          <button class="p-button u-float-left" aria-controls="modal">Unsubscribe</button>
        </p>
      </div>
      <div class="col-6 col-medium-3 col-small-2">
        <p>
          <button id="update-preferences"
                  form="subscription-centre"
                  class="p-button--positive u-float-right"
                  disabled>Update Preferences</button>
        </p>
      </div>
    </div>
  </section>

  <div class="p-modal" id="modal">
    <section class="p-modal__dialog"
             role="dialog"
             aria-modal="true"
             aria-labelledby="modal-title"
             aria-describedby="modal-description">
      <header class="p-modal__header">
        <h2 class="p-modal__title" id="modal-title">Unsubscribe</h2>
        <button class="p-modal__close"
                aria-label="Close active modal"
                aria-controls="modal">Close</button>
      </header>
      <p id="modal-description">Are you sure you want to unsubscribe from all topics?</p>
      <footer class="p-modal__footer">
        <button class="u-no-margin--bottom" aria-controls="modal">Cancel</button>
        <button id="unsubscribe" class="p-button--negative u-no-margin--bottom">Unsubscribe</button>
      </footer>
    </section>
  </div>

  <script src="/static/js/src/modal.js"></script>
  <script>
    (function() {
      initModals('#modal', '[aria-controls=modal]', false)
    })();
  </script>
  <script>
    // Handles form submissions
    (function() {
      const form = document.querySelector("#subscription-centre");
      const returnUrl = document.querySelector("#return-url");
      let hasRun = false;

      const handleUpdatePreferencesBtn = (e) => {
        e.preventDefault();
        form.submit();
      };

      const handleUnsubscribeBtn = async (e) => {
        e.preventDefault();
        returnUrl.value = "#unsubscribed";
        form.submit();
      };

      const enableUpdatePreferencesBtn = () => {
        const updatePreferencesBtn = document.querySelector("#update-preferences");
        updatePreferencesBtn.disabled = false;
      };

      document.querySelector("#update-preferences").addEventListener("click", handleUpdatePreferencesBtn, {
        once: true
      });

      document.querySelector("#unsubscribe").addEventListener("click", handleUnsubscribeBtn, {
        once: true
      });

      form.addEventListener('input', () => {
        if (hasRun) return;
        hasRun = true;
        enableUpdatePreferencesBtn();
      });
    })()
  </script>
  <script>
    // Setup search
    (function() {
      const subsContainer = document.querySelector("#subscriptions-list");
      const subsSearch = document.querySelector("#subscription-centre-search");
      const resultContainer = document.querySelector(".p-search-and-filter__panel");
      const searchInput = document.querySelector("#subscription-search");
      const clearSearchBtn = subsSearch.querySelector(".p-search-and-filter__clear");

      const attachListeners = () => {
        searchInput.addEventListener("input", handleSearch);

        clearSearchBtn.addEventListener("pointerdown", handleClearBtn);
        clearSearchBtn.addEventListener("keyup", handleClearBtn);

        resultContainer.addEventListener("pointerdown", handleSearchSelection);
        resultContainer.addEventListener("keyup", handleSearchSelection);

        searchInput.addEventListener("focus", (e) => e.target.value && hideResultsDropdown(false));
      };

      // Get all input field and map them into a searchable array
      const buildSearchableList = () => {
        const nodeList = subsContainer.querySelectorAll("input[type=checkbox]");
        const subsArray = [].map.call(nodeList, node => node.value);

        return subsArray;
      };

      // Searches for matching strings and renders the matches in the search dropdown
      const handleSearch = (e) => {
        const searchVal = e.target.value.trim().toLowerCase();

        const renderResults = (results) => {
          const templateContainer = document.querySelector("#search-result-template");

          clearResults();
          hideResultsDropdown(false);

          if (!results.length) {
            results.push(`No results for ${searchVal}...`);
          }
          results.slice(0, 10).forEach(result => {
            const newResultNode = templateContainer.content.cloneNode(true);
            newResultNode.querySelector("span").innerText = result;
            resultContainer.appendChild(newResultNode);
          });
        };

        // Checks for exact match of string and add to the top of results. If no exact match, look for any kind of match and add to the end of results
        if (searchVal) {
          hideCancleBtn(false);
          const searchResults = [];
          subsList.forEach(subItem => {
            if (subItem.toLowerCase().slice(0, searchVal.length) == searchVal) {
              searchResults.unshift(subItem);
            } else if (subItem.toLowerCase().includes(searchVal)) {
              searchResults.push(subItem);
            }
          });
          renderResults(searchResults);
        } else {
          hideResultsDropdown(true);
          hideCancleBtn(true);
          clearResults();
        }
      };

      // On selecting an option from the dropdown, focus the associated input field
      const handleSearchSelection = (e) => {
        if (!checkValidEventType(e)) return;

        const target = e.target.closest("[role=button]");
        const targetName = target.querySelector("span").innerHTML;
        const targetInput = subsContainer.querySelector(`[aria-labelledby="${targetName}"]`);
        const subGroup = targetInput.closest(".p-accordion__group");
        const subGroupTab = subGroup.querySelector(".p-accordion__tab");

        if (targetInput) {
          // checks if the panel is already open and opens it if needed
          if (subGroupTab.getAttribute("aria-expanded") == "false") {
            subGroupTab.click();
          }
          hideResultsDropdown(true);
          targetInput.focus();
        }
      };

      // Clear button in the search bar
      const handleClearBtn = (e) => {
        if (!checkValidEventType(e)) return;
        hideResultsDropdown(true);
        hideCancleBtn(true);
        clearResults();
        searchInput.value = "";
      };

      // Shows/hides results dropdown
      const hideResultsDropdown = (bool) => {
        resultContainer.setAttribute("aria-hidden", bool);
      };

      // Shows/hides cancle button
      const hideCancleBtn = (bool) => {
        clearSearchBtn.setAttribute("aria-hidden", bool);
        if (bool) clearSearchBtn.setAttribute("hidden", bool);
        else clearSearchBtn.removeAttribute("hidden");
      }

      // Clear current stored results
      const clearResults = () => {
        resultContainer.innerHTML = "";
      };

      // Check for valid affirmative key/pointer press
      const checkValidEventType = (e) => {
        if (e.type == "pointerdown") return true;
        if (e.keyCode == 13) return true;
        if (e.keyCode == 32) return true;
        return false;
      }

      const subsList = buildSearchableList();
      attachListeners();
    })();
  </script>

{% endblock content %}