cloud/templates/en/panel/stations/add.eta

<% layout("/en/layout", { title: "add station" }) %>

<%~ include("/en/panel/partials/navbar") %>

<% const backIcon = `
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 19l-7-7l7-7m7 7H5" />
    </svg>
` %>

<% const addIcon = `
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14" />
    </svg>
` %>

<% const errorIcon = `
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01" />
  </svg>
` %>

<div class="container-row">
    <a role="button" href="/en/panel/stations"><%~ backIcon %></a>
    <h2><%~ addIcon %> add station</h2>
</div>

<% const errorValue = it.error?.split('.').reduce((a, b) => a[b], it.lang.stations?.errors)?.(it?.errorDetails) %>

<% if (typeof errorValue === "string") { %>
  <div class="message error">
    <p class="messageText"><%~ errorIcon %> <%= errorValue %></p>
  </div>
<% } %>

<form action="/en/panel/stations/add" method="post">
  <div>
    <label for="name">name</label>
    <input type="text" id="name" name="name" placeholder="cool station">
  </div>

  <div>
    <label for="description">description</label>
    <textarea id="description" name="description" placeholder="the coolest one"></textarea>
  </div>

  <div class="cf-turnstile" data-sitekey="<%= it.siteKey %>"></div>

  <button type="submit" class="primary"><%~ addIcon %> add</button>
</form>


<script
  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
  async
  defer
></script>