<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(title=~{::title}, main=~{::main})">
<head>
  <title>Wee! Workflow Enactment Engine</title>
</head>
<body>
<main>
  <section class="pt-6 pb-6 pl-5 pr-5">
    <h2 class="is-size-3 is-capitalized">Welcome to WEE!</h2>
    <audio id="audio" src="/audio/Wee.mp3"></audio>
    <img id="img" value="PLAY" onclick="play()" class="wee-meme-image" src="../static/img/wee.png" th:src="@{/img/wee.png}" alt="Logo of person slipping"><!--  https://thenounproject.com/icon/slipping-11426/  -->
    <p>If you want to see wee memes click <a href="https://www.instagram.com/weee.memes/">here!</a></p>
    <p>Otherwise, please, indicate the url of your endpoint and let's start enacting your workflow!</p>
    <form class="pt-3" th:action="@{/pm}" method="post">
      <div class="field has-addons">
        <div class="control is-expanded">
          <input class="input" placeholder="SPARQL endpoint URI" th:if="${hasEndpoint}" type="text" id="endpointURL" name="endpoint" th:value="${savedEndpoint}"/>
          <input class="input" placeholder="SPARQL endpoint URI" th:unless="${hasEndpoint}" type="text" id="endpointURL" name="endpoint"/>
        </div>
        <div class="control">
          <button type="submit" class="button is-primary">Next</button>
        </div>
      </div>
    </form>

    <div th:if="${error}" class="notification is-danger">
      <button class="delete"></button>
      <strong>Error</strong> connecting to specified endpoint!
    </div>
  </section>
</main>
</body>
</html>