{{define "block_modal"}}
<section class="modal-layer" data-modal-root="{{.Modal.Root}}" {{if eq .Modal.Root "user-create"}}data-user-modal="true"{{end}} hidden>
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-box" role="dialog" aria-modal="true" aria-label="{{.Modal.Title}}">
    <div class="panel-header modal-header">
      <h2>{{.Modal.Title}}</h2>
      <button type="button" class="modal-close" aria-label="닫기" data-modal-close>x</button>
    </div>
    <p class="modal-message">{{.Modal.Message}}</p>
    <form class="modal-form" {{if eq .Modal.Root "user-create"}}data-user-form{{end}}>
      <div class="form-grid compact-grid">
        {{range .Modal.Fields}}
          {{if eq .Type "hidden"}}
            <input type="hidden" name="{{.Name}}" value="{{.Value}}">
          {{else}}
            <div class="form-row">
              <label>{{.Label}}</label>
              {{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 "password"}}
                <input type="password" name="{{.Name}}" value="{{.Value}}" placeholder="{{.Placeholder}}">
              {{else}}
                <input type="text" name="{{.Name}}" value="{{.Value}}" placeholder="{{.Placeholder}}">
              {{end}}
            </div>
          {{end}}
        {{end}}
      </div>
      <div class="panel-actions">
        {{range .Modal.Buttons}}
          <button type="{{if eq .Action "submit-user-form"}}submit{{else}}button{{end}}" class="btn {{.Variant}}" {{if eq .Action "cancel-modal"}}data-modal-close{{else if eq .Action "submit-user-form"}}data-user-submit{{else}}data-mock-action="{{.Action}}"{{end}}>{{.Label}}</button>
        {{end}}
      </div>
    </form>
  </div>
</section>
{{end}}