{{define "block_form"}}
<section class="panel">
  <div class="panel-header">
    <h2>{{.Title}}</h2>
    {{if .Subtitle}}<p>{{.Subtitle}}</p>{{end}}
  </div>
  <form class="mock-form" action="{{.Form.Action}}" method="post" data-mock-form>
    <input type="hidden" name="action" value="{{.Form.Action}}">
    <div class="form-grid">
      {{range .Form.Fields}}
        <div class="form-row form-type-{{.Type}}">
          <label>{{.Label}}{{if .Required}} <span class="required">*</span>{{end}}</label>
          {{if eq .Type "text"}}
            <input type="text" name="{{.Name}}" value="{{.Value}}" placeholder="{{.Placeholder}}" {{if .Disabled}}disabled{{end}}>
          {{else if eq .Type "password"}}
            <input type="password" name="{{.Name}}" value="{{.Value}}" placeholder="{{.Placeholder}}">
          {{else if eq .Type "textarea"}}
            <textarea name="{{.Name}}" rows="{{.Rows}}">{{.Value}}</textarea>
          {{else if eq .Type "select"}}
            <select name="{{.Name}}">
              {{range .Options}}
                <option value="{{.Value}}" {{if .Selected}}selected{{end}}>{{.Label}}</option>
              {{end}}
            </select>
          {{else if eq .Type "toggle"}}
            <label class="switch">
              <input type="checkbox" name="{{.Name}}" {{if .Checked}}checked{{end}}>
              <span class="slider"></span>
            </label>
          {{end}}
          {{if .Hint}}<div class="field-hint">{{.Hint}}</div>{{end}}
        </div>
      {{end}}
    </div>

    {{if .Form.Notes}}
      <div class="note-list">
        {{range .Form.Notes}}<div class="note-item">{{.}}</div>{{end}}
      </div>
    {{end}}

    <div class="panel-actions">
      {{if .Form.PrimaryLabel}}<button type="submit" class="btn primary" data-mock-action="apply">{{.Form.PrimaryLabel}}</button>{{end}}
      {{if .Form.SecondaryLabel}}<button type="button" class="btn secondary" data-mock-action="secondary">{{.Form.SecondaryLabel}}</button>{{end}}
    </div>
  </form>
</section>
{{end}}