<div class="accordion-content">
    <ul>
        <h3>Create A File Set</h3>
        <form action="/create_file_set" data-form="create-fs" method="post">

            {% for field in ui_fields_fset %}
            <div>
                {% if field.name == "creating_user" %}

                {% elif field.name == "ref_type" %}

                {% elif field.name == "tags" %}

                {% elif field.type == "select" %}
                    
                      
                    <label for="{{ field.name }}">{{ field.label }}</label>

                    <select name="{{ field.name }}" id="{{ field.name }}" class="select-filter">
                        <option value="" selected></option> <!-- Placeholder for blank state -->
                        {% for option in field.options %}
                            <option value="{{ option }}">{{ option }}</option>
                        {% endfor %}
                    </select>

                {% else %}
                <label for="{{ field.name }}">{{ field.label }}</label>

                    {% if field.name.endswith('_datetime') %}
                        <input type="date" name="{{ field.name }}" id="{{ field.name }}" />
                    {% else %}
                        <input type="{{ field.type }}" name="{{ field.name }}" id="{{ field.name }}" />
                    {% endif %}
                {% endif %}
            </div>
        {% endfor %}
           
            <label for="file_euids">File EUIDs :</label>
            <textarea id="file_euids" name="file_euids" required></textarea>

            <br><br>
            <label for="ref_type">Share Files In Set? </label>
            <select id="ref_type" name="ref_type" onchange="toggleRcloneOptions()">
                <option value="na">Just Create File Set</option>
                <option value="presigned_url">Create Presigned S3 URLS Per File</option>
                <option value="rclone serve http">Share File Set Via HTTP</option>
                <option value="rclone serve ftp">Share File Set Via FTP </option>
                <option value="rclone serve sftp">Share File Set Via SFTP</option>
                <option value="rclone serve webdav">Share File Set Via WEBDAV</option>
                <option value="rclone serve restic">Share File Set Via RESTIC</option>
                <option value="ne rclone nfs">Share File Set Via NFS (not enabled)</option>
                <option value="ne rclone s3">Share File Set Via S3 (not enabled)</option>        
                <option value="ne rclone dlna">Share File Set Via DLNA (not enabled)</option>
                <option value="ne rclone docker">Share File Set Via DOCKER (not enabled)</option>
            </select><br>
            <div id="rclone-options" style="display: none;">
                <small><a href=https://rclone.org/commands/rclone_serve/>rclone serve</a> is magic & free</small>
                <br><br>
                bucket:<input type="text" name="bucket" value="{{ s3_bucket_prefix }}"> //
                host:<input type="text" name="host" value="0.0.0.0"> // port:<input type="text" name="port" value="8080"> // 
                user:<input type="text" name="user" value="user"> // pass:<input type="text" name="passwd" value="passwd">         
            </div>

            <br>
            <label for="duration"> Share Duration (days, float acceptable): </label>
            <input  id="duration" name="duration" value="1" >
  
            <br><br>
            <button type="submit">Create File Set</button>
        </form>
    </ul>
</div>

<script>
    function toggleRcloneOptions() {
        var refType = document.getElementById("ref_type").value;
        var rcloneOptions = document.getElementById("rclone-options");
        
        if (refType.startsWith("rclone")) {
            rcloneOptions.style.display = "block";
        } else {
            rcloneOptions.style.display = "none";
        }
    }

    // Call the function on page load to set the correct state
    document.addEventListener("DOMContentLoaded", function() {
        toggleRcloneOptions();
    });
</script>
