{{/* 
    Metaform Partial Template
    This template renders a form based on a Form struct from the metaform package.
    
    Usage:
    {{template "partials/metaform.html" .}}
    
    Where . contains Form and Type fields
*/}}

<div class="metaform" data-connector-type="{{.Type}}">
    {{range .Form.Fields}}
        <div class="mb-4">
            <label for="connector_{{.Name}}">{{.Label}}{{if .Required}} <span class="required">*</span>{{end}}</label>
            
            {{if eq .Kind "string"}}
                <input type="text" 
                       name="connector_field_{{.Name}}" 
                       id="connector_{{.Name}}" 
                       class="connector-field"
                       data-field-name="{{.Name}}"
                       data-field-type="string"
                       {{if .Placeholder}}placeholder="{{.Placeholder}}"{{end}}
                       {{if .Required}}required{{end}}>
            
            {{else if eq .Kind "number"}}
                <input type="number" 
                       name="connector_field_{{.Name}}" 
                       id="connector_{{.Name}}" 
                       class="connector-field"
                       data-field-name="{{.Name}}"
                       data-field-type="number"
                       {{if .Placeholder}}placeholder="{{.Placeholder}}"{{end}}
                       {{if .Required}}required{{end}}>
            
            {{else if eq .Kind "options"}}
                <select name="connector_field_{{.Name}}" 
                        id="connector_{{.Name}}"
                        class="connector-field"
                        data-field-name="{{.Name}}"
                        data-field-type="options"
                        {{if .Required}}required{{end}}>
                    <option value="">Select an option</option>
                    {{range .Options}}
                        <option value="{{.Value}}">{{.Label}}</option>
                    {{end}}
                </select>
            {{end}}
        </div>
    {{end}}
</div>

<style>
    .metaform .required {
        color: #ff5555;
    }
    
    .metaform input[type="text"],
    .metaform input[type="number"],
    .metaform select {
        width: 100%;
        padding: 10px;
        background-color: #1a1a1a;
        border: 1px solid #333;
        color: #f0f0f0;
        border-radius: 4px;
        margin-top: 5px;
        transition: border-color 0.3s, box-shadow 0.3s;
    }
    
    .metaform input[type="text"]:focus,
    .metaform input[type="number"]:focus,
    .metaform select:focus {
        border-color: #00b3ff;
        box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
        outline: none;
    }
    
    .metaform select {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
    }
    
    .metaform label {
        display: block;
        margin-bottom: 5px;
        color: #f0f0f0;
        font-weight: 500;
    }
</style>