<!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-4.0.0.css" rel="stylesheet">
  <script src="jquery-1.11.3.js"></script>
  <style>
    div.disabled {
      opacity: 0.3;
    }

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

    jQuery(document).ready(function () {

      //
      // EDIT HERE (START)
      //

      var versions = [
        {
          major: "4",
          release: "4.2.1",
          staging: "",
          snapshot: "4.3.0-SNAPSHOT",
          link: "4",
          archived: false
        },
        {
          major: "3",
          release: "3.0.6",
          staging: "",
          snapshot: "3.1.0-SNAPSHOT",
          link: "3",
          archived: false
        },
        {
          major: "2",
          release: "2.1.1",
          staging: "",
          snapshot: "2.1.2-SNAPSHOT",
          link: "2",
          archived: false
        },
        {
          major: "1.5",
          release: "1.5.13",
          staging: "",
          snapshot: "",
          link: "1-5",
          archived: true

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

      //
      // EDIT HERE (END)
      //

      var template = jQuery("#template");

      for (var v = versions.length - 1; v >= 0; v--) {
        var version = versions[v];
        var clone = template.clone();

        clone.removeClass("d-none");

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

        if (version.staging) {
          clone.find(".x-staging-off").get(0).setAttribute("style", "display:none !important");
        } else {
          clone.find(".x-staging-on").get(0).setAttribute("style", "display:none !important");
        }

        if (version.snapshot) {
          clone.find(".x-snapshot-off").get(0).setAttribute("style", "display:none !important");
        } else {
          clone.find(".x-snapshot-on").get(0).setAttribute("style", "display:none !important");
        }

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

        if (version.archived) {
          clone.find(".btn-success").removeClass("btn-success").addClass("btn-secondary");
          clone.find(".x-release-version").append(" (archived)");
        }

        clone.insertAfter(template);
      }

      template.hide();

    });
  </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">

    <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="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-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 class="x-snapshot-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-snapshot-version"></h5>
        <p>Current development version. Work in progress.</p>
        <a class="x-snapshot-link btn btn-danger" 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>
</main>

<footer class="bd-footer text-muted">
  <div class="container-fluid p-3 p-md-5">
    <p>© 2005-2023 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>

</body>
</html>