{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container2">
        <div class="col-sm-10 mx-auto mt-5">
            <div class="card mt-3">
                <div class="card-header">
                    <h3 style="text-align:center"><b>Create Project</b></h3>
                </div>
                <div style="display: flex; justify-content: center; margin: 20px;">
                    <form method="post" style="width: 80%; ">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="name">Name: <span class="required">*</span></label>
                            {{ form.name }}
                        </div>
                        <div class="mb-3">
                            <label for="description:">Description:: </label>
                            {{ form.description }}
                        </div>
                        <div class="mb-3">
                            <label for="species">Species: <span class="required">*</span></label>
                            {{ form.species }}
                        </div>
                        <!-- <div class="mb-3">
                            <label for="id_expression_profile_type">Type of expression profile: <span class="required">*</span></label>
                            {{ form.expression_profile_type }}
                        </div>
                        <div class="mb-3"  id="expression-scale-container">
                            <label for="id_expression_scale">Expression scale: <span class="required">*</span></label>
                            {{ form.expression_scale }}
                        </div> -->
                        <button type="submit" class="btn btn-primary">Create</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        const profileTypeField = document.getElementById('id_expression_profile_type');
        const scaleContainer = document.getElementById('expression-scale-container');
        const scaleField = document.getElementById('id_expression_scale');

        function toggleScaleField() {
            const selectedType = profileTypeField.value;
            if (selectedType === 'Microarray') {
                scaleContainer.innerHTML = `
                    <label>Expression scale: <span class="required">*</span></label>
                    <select name="expression_scale" class="form-select">
                        <option value="Log2 value">Log2 value</option>
                        <option value="Original value">Original value</option>
                    </select>`;
            } else if (selectedType === 'NGS') {
                scaleContainer.innerHTML = `
                    <label>Expression scale: <span class="required">*</span></label>
                    <select name="expression_scale" class="form-select">
                        <option value="RPM">RPM</option>
                        <option value="FPKM">FPKM</option>
                        <option value="TPM">TPM</option>
                    </select>`;
            } else if (selectedType === 'others') {
                scaleContainer.innerHTML = `
                    <label>Expression scale: <span class="required">*</span></label>
                    <input type="text" name="expression_scale" class="form-control" placeholder="Enter a value">`;
            }
        }

        // 初次載入時執行
        toggleScaleField();
        // 當 profile type 改變時，重新渲染 expression scale
        profileTypeField.addEventListener('change', toggleScaleField);
    });
</script> -->
<style>
    .required {
        color: red;
        font-weight: bold;
    }
</style>
{% endblock %}