<!DOCTYPE html>
<html lang="fr">
  <head dir="ltr">
    {{>head.html}}
    <link rel="stylesheet" href="/css/portfolio.css" />
    <link rel="stylesheet" href="/css/languages.css" />
  </head>
  <body>
    <header>{{>navbar.html}}</header>
    <main>
      {{#data}}
      <h1>Portfolio</h1>
      {{#about}} {{&content}} {{/about}}

      <!-- Error message -->
      {{#location_apps}}
      <p>{{location_apps}} {{err_msg}}</p>
      {{/location_apps}} {{^location_apps}}

      <h2>Projets</h2>
      <ul>
        {{#apps}} {{>portfolio/card.html}} {{/apps}}
      </ul>

      {{#archived_apps_exists}}
      <h2>Archives</h2>
      <ul>
        {{#archived_apps}} {{>portfolio/card.html}} {{/archived_apps}}
      </ul>
      {{/archived_apps_exists}} {{/location_apps}}
    </main>

    {{#about}} {{#metadata}}
    {{#mail_obfsucated}}{{>libs/mail_obfuscater.html}}{{/mail_obfsucated}}
    {{/metadata}} {{/about}} {{/data}}

    <script>
      /* Fix links in list */
      window.addEventListener("load", () =>
        document.querySelectorAll("main a").forEach(function (link) {
          link.setAttribute("target", "_blank");
          link.setAttribute("rel", "noreferrer");
          link.addEventListener("mouseup", function (event) {
            event.stopPropagation();
          });
        })
      );

      /* Middle click */
      const disableScroll = () => {
        if (event.button === 1) {
          event.preventDefault();
        }
      };

      /* Open cards link */
      const openLink = (url) => {
        const backgroundtab = () =>
          Object.assign(document.createElement("a"), {
            href: url,
            target: "_blank",
            rel: "noreferrer",
          }).dispatchEvent(
            new MouseEvent("click", { ctrlKey: true, metaKey: true })
          );

        switch (event.button) {
          case 0:
            /* Left click */
            if (event.ctrlKey || event.metaKey) {
              backgroundtab();
            } else {
              window.open(url, "_blank", "noreferrer");
            }
            break;

          case 1:
            /* Middle click */
            backgroundtab();
            break;

          default:
            break;
        }
      };
    </script>
  </body>
</html>