{{define "content"}}
<div class="container" style="max-width:32rem;">
  <div class="card">
    <div class="card-header">
      <h1 class="text-base font-semibold" style="margin:0;">{{t .Lang "repo.new.title"}}</h1>
    </div>

    <form method="post" action="/new" class="card-body flex flex-col gap-3">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">

      <div>
        <label class="label" for="name">{{t .Lang "repo.name"}}</label>
        <div class="flex items-center gap-2">
          <span class="text-sm text-muted font-mono flex-shrink-0">{{.CurrentUser.Username}} /</span>
          <input id="name" name="name" type="text" class="input font-mono flex-1 min-w-0" value="{{.FormName}}" placeholder="project" required autofocus pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{0,63}$">
        </div>
        <div class="field-hint">{{t .Lang "repo.name_hint"}}</div>
      </div>

      <div>
        <label class="label" for="description">{{t .Lang "repo.description"}}</label>
        <input id="description" name="description" type="text" class="input" value="{{.FormDescription}}" maxlength="500" placeholder="{{t .Lang "repo.description_ph"}}">
      </div>

      <div>
        <span class="label">{{t .Lang "repo.visibility"}}</span>
        <div class="flex flex-col gap-2">
          <label class="card p-3 flex items-start gap-2.5" style="cursor:pointer;">
            <input type="radio" name="visibility" value="public" checked style="margin-top:0.2rem;">
            <div>
              <div class="font-medium text-sm flex items-center gap-1.5">{{icon "globe" "size-4"}} {{t .Lang "repo.public"}}</div>
              <div class="text-xs text-muted mt-1">{{t .Lang "repo.public_desc"}}</div>
            </div>
          </label>
          <label class="card p-3 flex items-start gap-2.5" style="cursor:pointer;">
            <input type="radio" name="visibility" value="private" style="margin-top:0.2rem;">
            <div>
              <div class="font-medium text-sm flex items-center gap-1.5">{{icon "lock" "size-4"}} {{t .Lang "repo.private"}}</div>
              <div class="text-xs text-muted mt-1">{{t .Lang "repo.private_desc"}}</div>
            </div>
          </label>
        </div>
      </div>

      <div class="flex items-center justify-end gap-2 pt-2">
        <a href="/" class="btn btn-outline">{{t .Lang "common.cancel"}}</a>
        <button type="submit" class="btn btn-primary">
          {{icon "plus" "size-4"}}
          <span>{{t .Lang "repo.create_btn"}}</span>
        </button>
      </div>
    </form>
  </div>
</div>
{{end}}