<%- include('includes/header') %>

    <section class="section">
        <%- include('includes/flash') %>

        <form action="/editor" method="POST" class="box-editor">
            <h1 class="heading-m">Create new synth</h1>
            <select name="conceptFirst" class="dropdown-select">
                <% concepts.forEach(function(concept) { %>
                  <option value="<%= concept._id %>" class="dropdown-option"><%= concept.title %></option>
                <% }) %>
                <% const randomFirst = concepts[Math.floor(Math.random() * concepts.length)] %>
                <option value="<%= randomFirst %>"><%= randomFirst.title %></option>
            </select>
            <select name="conceptSecond" class="dropdown-select">
                <% concepts.forEach(function(concept) { %>
                  <option value="<%= concept._id %>" class="dropdown-option"><%= concept.title %></option>
                <% }) %>
                <% const randomSecond = concepts[Math.floor(Math.random() * concepts.length)] %>
                <option value="<%= randomSecond %>"><%= randomSecond.title %></option>
            </select>
            <textarea name="description" id="" cols="30" rows="5" type="text" placeholder="Write short description..." class="input"></textarea>
            <textarea name="body" id="" cols="30" rows="10" type="text" placeholder="Write main text here..." class="textarea"></textarea>
            <div class="contain-row">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit" class="button-primary">Create Post</button>
                <a href="/" class="button-ghost">Cancel</a>
            </div>
        </form>
    </section>
    
<%- include('includes/footer') %>