<!DOCTYPE html>
<html lang="{{.Locale}}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#fff">
    <title>{{.Title}}</title>
    <link rel="stylesheet" href="{{asset .Domain "/fonts/fonts.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/css/cozy-bs.min.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/styles/theme.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
    {{.Favicon}}
  </head>
  <body class="modal-open">
    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-dialog-centered">
        <main role="application" class="modal-content">
          <div class="modal-icon">
            <span class="icon icon-import"></span>
          </div>
          <div class="modal-body mt-4 mt-md-1 p-md-5">
            <form method="POST" action="/auth/authorize/sharing" class="d-contents">
              <input type="hidden" name="csrf_token" value="{{.CSRF}}" />
              <input type="hidden" name="sharing_id" value="{{.Sharing.SID}}" />
              <input type="hidden" name="state" value="{{.State}}" />

              <h1 class="h4 h2-md mb-4 text-center">{{t "Authorize Sharing Title Add"}}</h1>
              <div class="alert alert-info mb-4 px-md-5 py-md-4">
                {{range $index, $rule := .Sharing.Rules}}
                <div class="card card-elevation shadow rounded-3 authorize-pill w-100 mb-2 px-3 py-2">
                  {{if $rule.Mime }}
                  <span class="filetype-{{filetype $rule.Mime}} filetype"></span>
                  <span class="ms-3 text-truncate">
                    {{basename $rule.Title}}<span class="greyed-extension">{{ext $rule.Title}}</span>
                  </span>
                  {{else}}
                  <span class="filetype-other filetype"></span>
                  <span class="ms-3 text-truncate">{{$rule.Title}}</span>
                  {{end}}
                </div>
                {{end}}
                <p class="small mb-0">
                  {{t "Authorize Sharing Request"}}
                  <img class="icon bg-transparent" src="/sharings/{{.Sharing.SID}}/recipients/0/avatar" alt="" />
                  <strong class="fst-italic">{{.SharerName}} ({{.SharerDomain}})</strong>
                </p>
              </div>

              {{if .HasShortcut}}
              <input type="hidden" name="synchronize" value="true" />
              {{else}}
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="synchronize" name="synchronize" checked />
                <label class="form-check-label" for="synchronize">
                  {{t "Authorize Sharing Synchronize label"}}
                </label>
              </div>
              {{end}}
              <p class="{{if not .HasShortcut}}ps-4{{else}}text-center{{end}} caption text-muted mb-2">
                {{t "Authorize Sharing Description start" .SharerName .TargetType}}
              </p>
              <p class="{{if not .HasShortcut}}ps-4{{else}}text-center{{end}} caption text-muted mb-4">
                {{t "Authorize Sharing Description end" .TargetType .SharerName}}
              </p>
              <button type="submit" class="btn btn-primary btn-md-lg w-100">
                {{t "Authorize Sharing Submit Add"}}
              </button>

            </form>
          </div>
          <a href="/auth/authorize/sharing/{{.Sharing.SID}}/cancel?state={{.State}}" class="btn btn-icon position-absolute top-0 end-0" aria-label="Close">
            <span class="icon icon-cross"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="modal-backdrop show"></div>
    <script src="{{asset .Domain "/scripts/cirrus.js"}}"></script>
  </body>
</html>
