{{define "share"}}
<div class="sg-container" style="justify-content: center;">
  
  <div style="flex: 1; display: flex; align-items: flex-start; padding-top: 5vh; justify-content: center;">
    <div class="data-card" style="padding: 48px; max-width: 480px; width: 100%;">
      <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 8px;">{{.T.share_access}}</h1>
      <p style="color: var(--text-muted); font-weight: 300; margin-bottom: 32px;">{{.T.share_access_intro}}</p>
      
      {{if .Error}}
      <div class="error">{{.Error}}</div>
      {{end}}
      
      <form action="/dossier/{{.TargetDossier.DossierID}}/share" method="POST">
        <input type="hidden" name="email_lang" value="{{.Lang}}">
        
        <div class="form-group">
          <label>{{.T.name}}</label>
          <input type="text" name="recipient_name" required placeholder="First Last" value="{{.RecipientName}}" autofocus>
        </div>
        
        <div class="form-group">
          <label>{{.T.email}}</label>
          <input type="email" name="email" required placeholder="someone@example.com" value="{{.Email}}">
        </div>
        
        <div class="form-group">
          <label>{{.T.relation_with}} {{.TargetDossier.Name}}</label>
          <select name="relation" required>
            <option value="">{{.T.select_relation}}</option>
            <option value="1"{{if eq .Relation "1"}} selected{{end}}>{{.T.rel_1}}</option>
            <option value="2"{{if eq .Relation "2"}} selected{{end}}>{{.T.rel_2}}</option>
            <option value="3"{{if eq .Relation "3"}} selected{{end}}>{{.T.rel_3}}</option>
            <option value="4"{{if eq .Relation "4"}} selected{{end}}>{{.T.rel_4}}</option>
            <option value="5"{{if eq .Relation "5"}} selected{{end}}>{{.T.rel_5}}</option>
            <option value="6"{{if eq .Relation "6"}} selected{{end}}>{{.T.rel_6}}</option>
            <option value="7"{{if eq .Relation "7"}} selected{{end}}>{{.T.rel_7}}</option>
            <option value="8"{{if eq .Relation "8"}} selected{{end}}>{{.T.rel_8}}</option>
            <option value="9"{{if eq .Relation "9"}} selected{{end}}>{{.T.rel_9}}</option>
            <option value="10"{{if eq .Relation "10"}} selected{{end}}>{{.T.rel_10}}</option>
          </select>
        </div>

        <div class="form-group" style="margin-top: 24px;">
          <label class="checkbox-label" style="display: flex; align-items: center; gap: 12px; cursor: pointer;">
            <input type="checkbox" name="can_edit" value="1" style="width: 18px; height: 18px;"{{if .CanEdit}} checked{{end}}>
            <span style="color: var(--text-muted);">{{.T.can_add_data}}</span>
          </label>
        </div>
        
        <div style="display: flex; gap: 12px; margin-top: 24px;">
          <a href="/dossier/{{.TargetDossier.DossierID}}" class="btn btn-secondary" style="flex: 1; text-align: center;">{{.T.cancel}}</a>
          <button type="submit" class="btn btn-primary" style="flex: 1;">{{.T.send_invitation}}</button>
        </div>
      </form>
    </div>
  </div>
  
  {{template "footer"}}
</div>
{{end}}