{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang links.title}</div>
    <div class="nv-page-desc">{lang links.desc}</div>
  </div>
</div>

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

<div class="nv-card" style="margin-bottom:16px">
  <div class="nv-card-body">
    <div class="nv-page-title" style="font-size:15px;margin-bottom:10px">{if $edit}{lang links.edit_link}{else}{lang links.add_link}{/if}</div>
    <form method="post" action="{$entry_prefix}/admin/plugin/friend-links/save">
      <input type="hidden" name="_token" value="{$csrf}">
      {if $edit}<input type="hidden" name="id" value="{$edit.id}">{/if}
      <div class="nv-form-grid">
        <div class="nv-form-row nv-mb0">
          <label class="nv-label">{lang links.name} <span class="nv-required">*</span></label>
          <input class="nv-input" type="text" name="name" maxlength="100" required
            value="{if $edit}{$edit.name}{/if}" placeholder="{lang links.name_ph}">
        </div>
        <div class="nv-form-row nv-mb0">
          <label class="nv-label">{lang links.url} <span class="nv-required">*</span></label>
          <input class="nv-input" type="url" name="url" required
            value="{if $edit}{$edit.url}{/if}" placeholder="https://example.com">
        </div>
      </div>
      <div class="nv-form-grid nv-mt16">
        <div class="nv-form-row nv-mb0">
          <label class="nv-label">{lang links.sort}</label>
          <input class="nv-input" type="number" name="sort" value="{if $edit}{$edit.sort}{else}0{/if}">
          <p class="nv-field-hint">{lang links.sort_hint}</p>
        </div>
        <div class="nv-form-row nv-mb0">
          <label class="nv-label">{lang admin.status}</label>
          <select class="nv-input" name="status">
            <option value="1" {if empty($edit) || $edit.status == 1}selected{/if}>{lang admin.enabled}</option>
            <option value="0" {if !empty($edit) && $edit.status == 0}selected{/if}>{lang admin.disabled}</option>
          </select>
        </div>
      </div>
      <div class="nv-form-row nv-mt16">
        <label class="nv-label">{lang links.desc_label}</label>
        <input class="nv-input" type="text" name="description" maxlength="255" value="{if $edit}{$edit.description}{/if}">
      </div>
      <div class="nv-toolbar" style="margin-top:12px">
        <button class="nv-btn nv-btn-primary" type="submit">{lang admin.save}</button>
        {if $edit}<a class="nv-btn" href="{$entry_prefix}/admin/plugin/friend-links">{lang admin.cancel}</a>{/if}
      </div>
    </form>
  </div>
</div>

<div class="nv-card">
  <div class="nv-card-body">
    {if !empty($rows)}
    <table class="nv-table">
      <thead>
        <tr><th>ID</th><th>{lang links.name}</th><th>{lang links.url}</th><th class="nv-num">{lang links.sort}</th><th>{lang admin.status}</th><th>{lang admin.operation}</th></tr>
      </thead>
      <tbody>
      {loop $rows as $r}
      <tr>
        <td>{$r.id}</td>
        <td>{$r.name}</td>
        <td><a href="{$r.url}" target="_blank" rel="noopener nofollow">{$r.url}</a></td>
        <td class="nv-num">{$r.sort}</td>
        <td>{if $r.status == 1}<span class="nv-tag nv-tag-ok">{lang admin.enabled}</span>{else}<span class="nv-tag">{lang admin.disabled}</span>{/if}</td>
        <td style="white-space:nowrap">
          <a class="nv-btn nv-btn-xs" href="{$entry_prefix}/admin/plugin/friend-links?edit={$r.id}">{lang admin.edit}</a>
          <form method="post" action="{$entry_prefix}/admin/plugin/friend-links/delete" style="display:inline" onsubmit="return confirm('{lang links.confirm_delete}');">
            <input type="hidden" name="_token" value="{$csrf}">
            <input type="hidden" name="id" value="{$r.id}">
            <button class="nv-btn nv-btn-xs nv-btn-danger" type="submit">{lang admin.delete}</button>
          </form>
        </td>
      </tr>
      {/loop}
      </tbody>
    </table>
    {else}
    <div class="nv-empty">
      <div class="nv-empty-title">{lang links.empty_title}</div>
      <div>{lang links.empty_hint}</div>
    </div>
    {/if}
  </div>
</div>