<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Options</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src=":/qtwebchannel/qwebchannel.js"></script>

    <script type="text/javascript">
        function submit_options() {
            var comments_col = document.getElementById("comments_col").value;
            var tags_col = document.getElementById("tags_col").value;
            var valid = true;
            if (comments_col === null || comments_col === "") {
                alert("Enter name for Comments column");
                valid = false;
            }
            if (tags_col === null || tags_col === "") {
                alert("Enter name for Tags column");
                valid = false;
            }
            if (valid) {
                new QWebChannel(qt.webChannelTransport, function (channel) {
                    channel.objects.bridge.respond(comments_col, tags_col);
                });
            }

        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h3 class="page-header"> The labeler will add a comments column and a tags column to the end of your data frame </h3>

            <form>
                <div class="form-group">
                    <label for="comments_col">Comments Column Name</label>
                    <input type="text" class="form-control" id="comments_col" placeholder="comments" value="{{ comments_col }}" required>
                </div>
                <div class="form-group">
                    <label for="tags_col">Tags Column Name</label>
                    <input type="text" class="form-control" id="tags_col" placeholder="tags" value="{{ tags_col }}" required>
                </div>
                <button type="submit" class="btn btn-default" onclick="submit_options()">Submit</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>