{layout admin/layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member/static/member.css">
<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang member.fields_title}</div>
    <div class="nv-page-desc">{lang member.fields_desc_1}{lang member.fields_desc_2}{lang member.fields_desc_3}</div>
  </div>
</div>

{if $flash.message}<div class="nv-alert nv-alert-{$flash.type}">{$flash.message}</div>{/if}

<div class="nv-card">
  <div class="nv-card-head">
    <span class="nv-card-title">{if $edit}{lang member.edit_field_colon}{$edit.label}{else}{lang member.new_field}{/if}</span>
    {if $edit}<a class="nv-muted" href="{$entry_prefix}/admin/plugin/member/fields">{lang member.cancel_edit}</a>{/if}
  </div>
  <div class="nv-card-body">
    <form method="post" action="{$entry_prefix}/admin/plugin/member/field/save">
      <input type="hidden" name="_token" value="{$csrf}">
      <input type="hidden" name="_form_token" value="{$form_token}">
      <input type="hidden" name="id" value="{if $edit}{$edit.id}{else}0{/if}">
      <div class="member-filter-grid">
        <div class="member-field">
          <label for="nName">{lang member.field_name_en}</label>
          <input id="nName" type="text" name="name" placeholder="{lang member.ph_company}" required
            pattern="[a-z][a-z0-9_]{0,29}" style="width:100%" value="{if $edit}{$edit.name}{/if}"
            {if $edit}readonly title="{lang member.field_name_hint}"{/if}>
        </div>
        <div class="member-field">
          <label for="nLabel">{lang member.display_name}</label>
          <input id="nLabel" type="text" name="label" placeholder="{lang member.ph_company_name}" required
            value="{if $edit}{$edit.label}{/if}">
        </div>
        <div class="member-field">
          <label for="nType">{lang admin.col_type}</label>
          <select id="nType" name="type">
            {loop $types as $k => $v}
            <option value="{$k}"{if $edit && $edit.type == $k} selected{/if}>{$v}</option>
            {/loop}
          </select>
        </div>
        <div class="member-field">
          <label for="nSort">{lang admin.sort}</label>
          <input id="nSort" type="number" name="sort" value="{if $edit}{$edit.sort}{else}100{/if}">
        </div>
      </div>
      <div class="member-field" style="margin-top:12px">
        <label for="nOptions">{lang member.options_label}</label>
        <textarea id="nOptions" name="options" rows="4" placeholder="{lang member.ind_internet}&#10;{lang member.ind_it}&#10;{lang member.ind_mfg}">{if $edit}{$edit.options}{/if}</textarea>
        <p class="nv-tips">{lang member.options_multi_hint_1}{lang member.options_multi_hint_2}</p>
      </div>
      <div class="member-field" style="margin-top:12px">
        <label for="nTips">{lang member.field_tips}</label>
        <input id="nTips" type="text" name="tips" maxlength="250" value="{if $edit}{$edit.tips}{/if}">
      </div>
      <div style="margin-top:12px;display:flex;gap:16px;flex-wrap:wrap;font-size:14px">
        <label><input type="checkbox" name="required" value="1"{if $edit && $edit.required} checked{/if}> {lang admin.required}</label>
        <label><input type="checkbox" name="filterable" value="1"{if !$edit || $edit.filterable} checked{/if}> {lang member.filterable}</label>
        <label><input type="checkbox" name="show_home" value="1"{if !$edit || $edit.show_home} checked{/if}> {lang member.show_home}</label>
        <label><input type="checkbox" name="status" value="1"{if !$edit || $edit.status} checked{/if}> {lang member.enable}</label>
      </div>
      <button class="nv-btn nv-btn-primary" type="submit" style="margin-top:14px">{if $edit}{lang member.save_changes}{else}{lang member.add_field}{/if}</button>
    </form>
  </div>
</div>

<div class="nv-card" style="margin-top:16px">
  <div class="nv-card-head"><span class="nv-card-title">{lang member.existing_fields}</span></div>
  <div class="nv-card-body">
    <table class="member-table">
      <thead>
        <tr><th>ID</th><th>{lang member.field_name}</th><th>{lang member.display_name}</th><th>{lang admin.col_type}</th><th>{lang admin.required}</th><th>{lang member.filterable}</th><th>{lang member.homepage}</th><th>{lang member.options}</th><th>{lang admin.operation}</th></tr>
      </thead>
      <tbody>
      {loop $fields as $f}
      <tr>
        <td>{$f.id}</td>
        <td><code>{$f.name}</code></td>
        <td>{$f.label}</td>
        <td style="font-size:13px">{$f.type_text}</td>
        <td>{if $f.required}{lang admin.yes}{else}{lang admin.no}{/if}</td>
        <td>{if $f.filterable}{lang admin.yes}{else}{lang admin.no}{/if}</td>
        <td>{if $f.show_home}{lang admin.yes}{else}{lang admin.no}{/if}</td>
        <td style="max-width:220px;font-size:12px;color:var(--color-text-muted,#6b7280)">
          {if $f.option_text}{$f.option_text}{else}—{/if}
        </td>
        <td style="white-space:nowrap">
          <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/fields?edit={$f.id}">{lang member.group_editor}</a>
          <form method="post" action="{$entry_prefix}/admin/plugin/member/field/delete" style="display:inline"
            onsubmit="return confirm('{lang member.del_field_a}{$f.label}{lang member.del_field_b}')">
            <input type="hidden" name="_token" value="{$csrf}">
            <input type="hidden" name="_form_token" value="{$form_token}">
            <input type="hidden" name="id" value="{$f.id}">
            <button class="nv-btn" type="submit">{lang admin.delete}</button>
          </form>
        </td>
      </tr>
      {/loop}
      </tbody>
    </table>
    <p class="nv-muted" style="margin-top:10px">
      {lang member.fields_footnote_1}{lang member.fields_footnote_2}
    </p>
  </div>
</div>