
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form</title>
    {{ bootstrap.load_css() }}
    <style>
      .material-symbols-outlined {
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
      }
      </style>
    <link rel="stylesheet" href="{{url_for('static', filename='/font-awesome/css/font-awesome.min.css')}}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons">
</head>
<body>
    <div class="container-fluid">
        <div class="col-12">
            <div class="d-flex flex-column justify-content-center text-center">
                <h1>Create {{form.attributes['title']}}</h1>
            </div>
            <div class="d-flex flex-column justify-content-center">
                <form action="/{{form.attributes['endpoint']}}" method="post">
                    <div class="form-group">
                        <label for="type_select">Type</label>
                        <select class="form-control" id="type_select" name="type">
                            {% for type in types %}
                                {% if type == active_type %}
                                    <option selected value="{{type}}">{{type}}</option>
                                {% else %}
                                    <option value="{{type}}">{{type}}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    {% for control in controls %}
                        <div class="form-group">
                        {% with item=item, control=control %}
                            {% include "control.html" %}
                        {% endwith %}
                        </div>
                    {% endfor %}
                    <!--
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-group form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    -->
                    <div class="d-flex flex-column justify-content-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> 
{{ bootstrap.load_js() }}
<script>
    $( "#type_select" ).change(function() {
        var url = window.location.href;
        var queryParams = new URLSearchParams(window.location.search);
        queryParams.set("type", $(this).val());
        window.location.href = window.location.origin + window.location.pathname + '?' + queryParams.toString();
    });
</script>
</body>
</html>
