{{define "content"}}
{{$n := .Data.Network}}{{$new := .Data.IsNew}}{{$sel := .Data.Selected}}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb small">
    <li class="breadcrumb-item"><a href="/policies/networks">Client Networks</a></li>
    <li class="breadcrumb-item active" aria-current="page">
      {{if $new}}New network{{else}}{{$n.Name}}{{end}}
    </li>
  </ol>
</nav>

<h1 class="page-title mb-1">{{if $new}}Add a client network{{else}}{{$n.Name}}{{end}}</h1>
{{if not $new}}<p class="text-body-secondary mono mb-4">{{$n.CIDR}}</p>{{else}}<div class="mb-4"></div>{{end}}

<form method="post" action="{{.Data.FormAction}}">
  <input type="hidden" name="_csrf" value="{{.CSRF}}">

  <div class="row g-3">
    <div class="col-12 col-lg-5">
      <div class="card mb-3">
        <div class="card-header">Network</div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label" for="netName">Name</label>
            <input type="text" class="form-control" id="netName" name="name" value="{{$n.Name}}"
                   placeholder="Guest Wi-Fi" required>
          </div>
          <div class="mb-3">
            <label class="form-label" for="netCIDR">Subnet</label>
            <input type="text" class="form-control mono" id="netCIDR" name="cidr" value="{{$n.CIDR}}"
                   placeholder="100.64.30.0/24" required autocomplete="off">
            <div class="form-text">
              IPv4 or IPv6 in CIDR notation. A bare address is treated as a single host.
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label" for="netDescription">Description</label>
            <textarea class="form-control" id="netDescription" name="description" rows="2"
                      placeholder="What this network is for">{{$n.Description}}</textarea>
          </div>
          <div class="form-check form-switch">
            <input type="hidden" name="enabled" value="false">
            <input class="form-check-input" type="checkbox" role="switch" id="netEnabled"
                   name="enabled" value="true" {{if or $new $n.Enabled}}checked{{end}}>
            <label class="form-check-label" for="netEnabled">Enabled</label>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body d-grid gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg me-1"></i>{{if $new}}Create network{{else}}Save changes{{end}}
          </button>
          <a href="/policies/networks" class="btn btn-outline-secondary">Cancel</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-7">
      <div class="card h-100">
        <div class="card-header">DNS Policies</div>
        <div class="card-body">
          <p class="text-body-secondary small">
            Tick every policy that should apply to clients in this subnet. Policies are
            evaluated together: an allowlist in any of them overrides a blacklist match in
            any other.
          </p>

          {{if .Data.Policies}}
          <div class="list-group">
            {{range .Data.Policies}}
            <label class="list-group-item d-flex gap-3 align-items-start">
              <input class="form-check-input flex-shrink-0 mt-1" type="checkbox"
                     name="policy_id" value="{{.ID}}" {{if index $sel .ID}}checked{{end}}>
              <span class="flex-grow-1">
                <span class="d-flex justify-content-between align-items-start gap-2">
                  <span class="fw-semibold">{{.Name}}</span>
                  <span>
                    <span class="badge text-bg-light text-dark">{{.BlockAction.Label}}</span>
                    {{if not .Enabled}}<span class="badge text-bg-secondary">disabled</span>{{end}}
                  </span>
                </span>
                {{if .Description}}
                <span class="d-block small text-body-secondary">{{.Description}}</span>
                {{end}}
                <span class="d-block small mt-1">
                  {{if .BlacklistName}}
                    <span class="text-body-secondary">Blocks:</span>
                    {{range $i, $b := .BlacklistName}}{{if $i}}, {{end}}{{$b}}{{end}}
                  {{end}}
                  {{if .AllowlistName}}
                    <span class="text-body-secondary ms-2">Allows:</span>
                    {{range $i, $a := .AllowlistName}}{{if $i}}, {{end}}{{$a}}{{end}}
                  {{end}}
                  {{if and (not .BlacklistName) (not .AllowlistName)}}
                    <span class="text-body-secondary fst-italic">No lists attached to this policy yet.</span>
                  {{end}}
                </span>
              </span>
            </label>
            {{end}}
          </div>
          {{else}}
          {{template "empty" dict "Icon" "bi-sliders" "Title" "No policies exist yet"
              "Message" "A policy pairs a set of blacklists and allowlists with a block action. Create one, then come back and assign it here."}}
          <div class="text-center">
            <a href="/policies/rules/new" class="btn btn-outline-primary btn-sm">
              <i class="bi bi-plus-lg me-1"></i>Create a policy
            </a>
          </div>
          {{end}}
        </div>
      </div>
    </div>
  </div>
</form>
{{end}}