<!DOCTYPE html>
<html>
<head>
    <title>Form</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <h1>SIDN VM host_vars creation form</h1>
    <div id="app">
        <form @submit.prevent="submitForm">
            <label for="hostname">Hostname:</label>
            <input type="text" id="hostname" v-model="formData.hostname" required>
            <br><br>
            <label for="motd">Message of the day:</label><br>
            <textarea id="motd" v-model="formData.motd" required></textarea>
            <br><br>
            <label for="location">Location:</label><br>
            {% for location in config_content.locations %}
            <input type="radio" id="location{{ loop.index }}" value="{{ location }}" v-model="formData.location" {% if loop.first %}required{% endif %}>
            <label for="location{{loop.index}}">{{ location }}</label><br>
            {% endfor %}
            <p v-if="!formData.location" style="color: red;">Please select an option.</p>
            <br>
            <label for="cluster">Cluster:</label><br>
            {% for cluster in config_content.clusters %}
            <input type="radio" id="cluster{{ loop.index }}" value="{{ cluster }}" v-model="formData.cluster" {% if loop.first %}required{% endif %}>
            <label for="cluster{{loop.index}}">{{ cluster }}</label><br>
            {% endfor %}
            <p v-if="!formData.cluster" style="color: red;">Please select an option.</p>
            <br>
            <label for="folder">Folder:</label><br>
            {% for folder in config_content.folders %}
            <input type="radio" id="folder{{ loop.index }}" value="{{ folder }}" v-model="formData.folder" {% if loop.first %}required{% endif %}>
            <label for="folder{{loop.index}}">{{ folder }}</label><br>
            {% endfor %}
            <p v-if="!formData.folder" style="color: red;">Please select an option.</p>
            <label for="vmconfig">VM config:</label><br>
            {% for vmconfig in config_content.vm_configs %}
            <input type="radio" id="vmconfig{{ loop.index }}" value="{{ vmconfig.name }}" v-model="formData.vmconfig" {% if loop.first %}required{% endif %}>
            <label for="vmconfig{{loop.index}}">{{ vmconfig.name}}:<br>&emsp;&emsp;CPU: {{ vmconfig.cpu }}<br>&emsp;&emsp;Memory: {{ vmconfig.memory }}MB</label><br><br>
            {% endfor %}
            <p v-if="!formData.vmconfig" style="color: red;">Please select an option.</p>
            <br>
            <label for="interfaces">Interface(s):</label><br>
            {% for interfaces in config_content.interfaces %}
            <input type="radio" id="interfaces{{ loop.index }}" value="{{ interfaces.name }}" v-model="formData.interfaces" {% if loop.first %}required{% endif %}>
            <label for="interfaces{{loop.index}}">{{ interfaces.descr }}</label><br>
            {% endfor %}
            <p v-if="!formData.interfaces" style="color: red;">Please select an option.</p>
            
            
            <label for="monitoring">Monitoring profile:</label><br>
            <select v-model="!formData.monitoring">
              <option disabled value="">Please select one</option>
            {% for monitoring in config_content.monitoring %}
              <option>{{ monitoring }}</option>
            {% endfor %}
            </select>
            <p v-if="!formData.monitoring" style="color: red;">Please select an option.</p>
            <br>
            <input type="submit" value="Generate YAML">
            <div v-if="formData.location !== ''">
                <p>You selected: {{ '{{ formData.location }}' }}</p>
            </div>
        </form>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    formData: {
                        hostname: '',
                        motd: '',
                        location: '',
                        cluster: '',
                        folder: '',
                        interfaces: ''
                    }
                };
            },
            methods: {
                submitForm() {
                    // Convert the formData object to JSON
                    const jsonData = JSON.stringify(this.formData);
                    // Send the JSON data to the server
                    fetch('/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: jsonData
                    })
                    .then(response => {
                        if (response.ok) {
                            alert('YAML file generated successfully!');
                        } else {
                            alert('Error generating YAML file.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Error generating YAML file.');
                    });
                }
            }
        });

        app.mount('#app');
    </script>
</body>
</html>

