{{define "content"}}
<div class="container">
  {{template "repo_header" .}}

  <div class="card" style="max-width:680px;">
    <div class="card-header" style="padding:0.6rem 0.9rem;">
      <span class="font-semibold text-sm flex items-center gap-2">
        {{if eq .Mode "folder"}}{{icon "folder" "size-4"}}{{else}}{{icon "file" "size-4"}}{{end}}
        {{if eq .Mode "folder"}}{{t .Lang "file.new_folder"}}{{else}}{{t .Lang "file.new_file"}}{{end}}
      </span>
      <span class="font-mono text-xs text-muted">{{.Repo.OwnerUsername}}/{{.Repo.Name}}</span>
    </div>
    <form method="post" action="{{if eq .Mode "folder"}}/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/new-folder{{else}}/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/new-file{{end}}" class="card-body flex flex-col gap-3">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">

      <div class="flex flex-col gap-1">
        <label class="text-xs font-semibold" for="path">{{t .Lang "file.path"}}</label>
        <input id="path" name="path" class="input font-mono" required autofocus value="{{if .SubPath}}{{.SubPath}}/{{end}}" placeholder="{{if eq .Mode "folder"}}{{t .Lang "file.folder_ph"}}{{else}}{{t .Lang "file.path_ph"}}{{end}}">
        {{if eq .Mode "folder"}}<span class="text-xs text-muted">{{t .Lang "file.folder_hint"}}</span>{{end}}
      </div>

      <div class="flex flex-col gap-1" style="max-width:240px;">
        <label class="text-xs font-semibold" for="ref">{{t .Lang "file.branch"}}</label>
        <select id="ref" name="ref" class="input font-mono">
          {{range .Branches}}<option value="{{.}}" {{if eq . $.Ref}}selected{{end}}>{{.}}</option>{{end}}
        </select>
      </div>

      {{if eq .Mode "file"}}
        <div class="flex flex-col gap-1">
          <label class="text-xs font-semibold" for="content">{{t .Lang "file.content"}}</label>
          <textarea id="content" name="content" class="input font-mono" rows="12" placeholder="{{t .Lang "file.content_ph"}}" style="resize:vertical;min-height:12rem;line-height:1.5;"></textarea>
        </div>
      {{end}}

      <div class="flex flex-col gap-1">
        <label class="text-xs font-semibold" for="message">{{t .Lang "file.message"}}</label>
        <input id="message" name="message" class="input font-mono" placeholder="{{if eq .Mode "folder"}}Create folder{{else}}Add file{{end}}">
      </div>

      <div class="flex items-center gap-2 pt-1">
        <button type="submit" class="btn btn-primary btn-sm">
          {{icon "check" "size-3.5"}}
          <span>{{if eq .Mode "folder"}}{{t .Lang "file.create_folder"}}{{else}}{{t .Lang "file.create_file"}}{{end}}</span>
        </button>
        <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tree/{{.Ref}}{{if .SubPath}}/{{.SubPath}}{{end}}" class="btn btn-ghost btn-sm">
          <span>{{t .Lang "common.cancel"}}</span>
        </a>
      </div>
    </form>
  </div>
</div>
{{end}}