<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Tobago Demo</title>
  <link href="/bootstrap.min.css" rel="stylesheet">
  <style>
    div.disabled {
      opacity: 0.3;
    }

    .na {
      text-align: center;
      vertical-align: middle;
    }
  </style>
  <script>

    document.addEventListener("DOMContentLoaded", function (event) {

      //
      // EDIT HERE (START)
      //

      var versions = [
        {
          major: "5",
          release: "",
          staging: "",
          snapshot: "5.1.1-SNAPSHOT",
          link: "5",
          archived: false,
          current: true
        },
        {
          major: "4",
          release: "",
          staging: "",
          snapshot: "4.5.6-SNAPSHOT",
          link: "4",
          archived: false,
          current: false
        },
/*        {
          major: "3",
          release: "",
          staging: "",
          snapshot: "",
          link: "3",
          archived: true
        },*/
        {
          major: "2",
          release: "",
          staging: "",
          snapshot: "2.5.1-SNAPSHOT",
          link: "2",
          archived: false,
          current: false
        },
/*        {
          major: "1.5",
          release: "",
          staging: "",
          snapshot: "",
          link: "1-5",
          archived: true

        },
        {
          major: "1.0",
          release: "",
          staging: "",
          snapshot: "",
          link: "1-0",
          archived: true
        }*/
      ];

      //
      // EDIT HERE (END)
      //

      var template = document.getElementById("template");

      for (var v = 0; v < versions.length; v++) {
        var version = versions[v];
        var clone = template.cloneNode(true);
        clone.removeAttribute("id");

        clone.classList.remove("d-none");
        template.parentNode.insertBefore(clone, template);

        clone.querySelector(".x-title").append(version.major);
//        clone.querySelector(".x-release-version").append(version.release);
//        clone.querySelector(".x-staging-version").prepend(version.staging + " ");
        clone.querySelector(".x-snapshot-version").append(version.snapshot);

/*
        if (version.release) {
          clone.querySelector(".x-release-off").classList.remove("d-md-flex");
        } else {
          clone.querySelector(".x-release-on").classList.add("d-none");
        }

        if (version.staging) {
          clone.querySelector(".x-staging-off").classList.remove("d-md-flex");
        } else {
          clone.querySelector(".x-staging-on").classList.add("d-none");
        }
*/

        if (version.snapshot) {
//          clone.querySelector(".x-snapshot-off").classList.remove("d-md-flex");
        } else {
          clone.querySelector(".x-snapshot-on").classList.add("d-none");
        }

        if (version.current) {
          clone.querySelector(".x-snapshot-link").classList.add("btn-success");
        } else {
          clone.querySelector(".x-snapshot-link").classList.add("btn-warning");
        }


//        clone.querySelector(".x-release-link").setAttribute("href", "/demo-" + version.link + "-release/");
//        clone.querySelector(".x-staging-link").setAttribute("href", "/demo-" + version.link + "-staging/");
        clone.querySelector(".x-snapshot-link").setAttribute("href", "/demo-" + version.link + "-snapshot/");

        if (version.archived) {
          let button = clone.querySelector(".btn-success");
          if (button) {
            const buttonClassList = button.classList;
            buttonClassList.remove("btn-success");
            buttonClassList.add("btn-secondary");
            clone.querySelector(".x-release-version").append(" (archived)");
          }
        }

      }

    });
  </script>
</head>
<body class="bd-home">

<!--
<header class="navbar navbar-dark flex-column flex-md-row bd-navbar bg-dark">
  <a class="navbar-brand" href="https://myfaces.apache.org/tobago/">Tobago</a>
</header>
-->
<main class="bd-masthead" id="content" role="main">

  <div class="container p-5">

    <div class="row">

      <div class="m-0 border border-white d-md-flex bg-light col-12">
        <h1>Demo Applications of Tobago</h1>
      </div>

      <noscript class="jumbotron masthead-followup row m-0 border border-white bg-warning">
      <h3>Please activate JavaScript, to use this page!</h3>
    </noscript>

    <!--
        <div class="jumbotron masthead-followup row m-0 border border-white d-md-flex d-none">
          <h1>Demo Applications of Tobago</h1>
        </div>

        <div class="jumbotron masthead-followup row m-0 border border-white d-md-none">
          <h2>Tobago Demo</h2>
        </div>
        <div class="masthead-followup row m-0 border border-white d-md-flex d-none">
          <div class="col-12 col-md-4 p-3 p-md-5 bg-success border border-white">
            <h3>Release</h3>
          </div>
          <div class="col-12 col-md-4 p-3 p-md-5 bg-warning border border-white">
            <h3>Staging</h3>
          </div>
          <div class="col-12 col-md-4 p-3 p-md-5 bg-danger border border-white">
            <h3>Snapshot</h3>
          </div>
        </div>
    -->
    <!-- template -->

    <!--
        <div id="template"
             class="masthead-followup row m-0 border border-white d-none">

          <div class="x-release-on col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
            <h3 class="x-title">Tobago </h3>
            <h5 class="x-release-version"></h5>
            <p>Last released version.</p>
            <a class="x-release-link btn btn-success" href="/">Demo</a>
          </div>
          <div class="x-release-off col-12 col-md-4 p-3 p-md-5 bg-light border border-white disabled d-md-flex d-none">
            <h3 class="na">Not released yet.</h3>
          </div>
    -->

      <!--
            <div class="x-staging-on col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
              <h3 class="x-title">Tobago </h3>
              <h5 class="x-staging-version">(not released yet)</h5>
              <p>Voting in progress.</p>
              <a class="x-staging-link btn btn-warning" href="/">Demo</a>
            </div>
            <div class="x-staging-off col-12 col-md-4 p-3 p-md-5 bg-light border border-white disabled d-md-flex d-none">
              <h3 class="na">Currently no voting active.</h3>
            </div>
            -->

      <div id="template" class="x-snapshot-on col-12 col-md-6 col-lg-4 p-3 p-md-5 bg-light border border-white d-none">
        <h3 class="x-title">Tobago </h3>
        <h5 class="x-snapshot-version"></h5>
        <p>Current development version. Work in progress.</p>
        <a class="x-snapshot-link btn btn-success" href="/">Demo</a>
      </div>
<!--
      <div class="x-snapshot-off col-12 col-md-4 p-3 p-md-5 bg-light border border-white disabled d-md-flex d-none">
        <h3 class="na">No active development.</h3>
      </div>
    </div>
-->

  </div>
  </div>
</main>

<div class="container">
<footer class="bd-footer text-muted">
  <div class="container-fluid p-3 p-md-5">
    <p>© 2005-2022 Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">
      Apache License, Version 2.0</a>.</p>
  </div>
</footer>
</div>

</body>
</html>