<!doctype html>
<html lang=en xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>CATS v DOGS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!-- [START cloudrun_end_user_firebase_scripts]-->
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first-->
    <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
    <!-- Add Firebase Auth service-->
    <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-auth.js"></script>
    <!-- [END cloudrun_end_user_firebase_scripts]-->
    <script src="/config.js"></script>
    <script src="/firebase.js"></script>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐱</text></svg>">
  </head>
  <body class="yellow lighten-5">
    <nav class="teal darken-3">
      <div class="nav-wrapper container"><a class="brand-logo center" href="#!">CATS v DOGS</a>
        <ul class="left" id="nav-mobile">
          <button class="waves-effect waves-light btn" id="signInButton">Sign In with Google</button>
        </ul>
      </div>
    </nav>
    <div class="section" id="form">
      <div class="center">
        <h4><span th:text="${leaderMessage}"/></h4>
      </div>
      <div class="row center">
        <div class="col s6 m5 offset-m1">
          <div th:classappend="${leadTeam} == 'CATS' ? 'card-panel teal lighten-4' : 'card-panel'">
            <i class="material-icons large">🐱</i>
            <h3><span th:text="${catVotes}"/> votes</h3>
            <button class="btn" id="voteCats">Vote for CATS</button>
          </div>
        </div>
        <div class="col s6 m5">
          <div th:classappend="${leadTeam} == 'DOGS' ? 'card-panel teal lighten-4' : 'card-panel'">
            <i class="material-icons large">🐶</i>
            <h3><span th:text="${dogVotes}"/> votes</h3>
            <button class="btn" id="voteDogs">Vote for DOGS</button>
          </div>
        </div>
      </div>
      <h4 class="header center">Recent Votes</h4>
      <ul class="container collection center" >
        <li class="collection-item avatar" th:each="vote : ${votes}" > 
          <i class="material-icons circle teal lighten-1" th:text="(${#strings.trim(vote.candidate)} == 'CATS') ? '🐱' : '🐶'"></i>
          <span class="title">
            A vote for 
          </span> 
          <b th:text=${vote.candidate}></b>
          <p th:text="'was cast at ' + ${vote.timeCast} + '.'" />
        </li>
      </ul>
    </div>
    <script>
      document.getElementById("voteCats").addEventListener("click", function () {
        vote("CATS");
      });
      document.getElementById("voteDogs").addEventListener("click", function () {
        vote("DOGS");
      });
      document.getElementById('signInButton').addEventListener("click", toggle)
    </script>
  </body>
</html>