<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= locals.appName %> - Feedback</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    
    <div class="container">
        <form>
            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" id="title" aria-describedby="titleHelp"/>
                <div id="titleHelp" class="form-text">Use a descriptive and concise title</div>
              </div>
              <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea class="form-control" id="description" rows="5" aria-describedby="descriptionHelp"></textarea>
                <div id="descriptionHelp" class="form-text">Go into detail - what's the issue or feature suggestion?</div>
              </div>
              <button type="button" class="btn btn-primary" onclick="submitFeedback()">Submit</button>
        </form>
    </div>

    <script>
        async function submitFeedback() {
            const title = document.querySelector('#title').value.trim();
            const description = document.querySelector('#description').value.trim();

            if (!title || !description) {
                alert('no title or description')
                return false;
            }

            const data = { title, description, appID: '<%= locals.appID %>'};
            console.log('data', data);
            const url = '/api/feedback/submit';
            console.log(url);
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });
            const status = await response.status;
            const json = await response.json();
            console.log(status, json);
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>