{% import "components.html" as c with context %}
<div id="{{ share_id }}" class="role-sharing"{% if share_kind == "computer" %} hx-morph-skip{% endif %} x-data="roleSharing" data-sharing='{{ share_data|tojson }}' data-leave="{{ t.text('shares.leave') }}" @beforeunload.window="if (dirty) { $event.preventDefault(); $event.returnValue = ''; }">
  <form hx-post="{{ share_url }}" hx-target="#{{ share_id }}" hx-swap="outerHTML" @submit="saving = true" @htmx:finally:request="saving = false">
    <input type="hidden" name="changes" :value="JSON.stringify({grants: changes})">
    {% if error %}<p class="err" role="alert">{{ t.text(error) }}</p>{% endif %}
    <fieldset class="permission-group share-permissions"><legend>{{ t.text("shares.permissions") }}</legend>
      {% for point in points %}<label class="check"><input type="checkbox" x-model="permissions" value="{{ point }}"><span>{{ t.text(point if share_kind == "computer" else "shares.action." ~ point.value.split('.')[1]) }}</span></label>{% endfor %}
    </fieldset>
    <p class="share-hint">{{ t.text("shares.transfer_hint") }}</p>
    <div class="share-transfer">
      <section class="share-list" aria-labelledby="share-available-title">
        <div class="share-list-head"><span id="share-available-title">{{ t.text("shares.available") }}</span></div>
        <input class="share-search" type="search" x-model="leftSearch" placeholder="{{ t.text('shares.search') }}" aria-label="{{ t.text('shares.search_available') }}">
        <label class="check share-select-all"><input type="checkbox" :checked="available.length > 0 && available.every(role => left.includes(role.id))" :disabled="!available.length" @change="left = $event.target.checked ? available.map(role => role.id) : []">{{ t.text("shares.select_all") }}</label>
        <div class="share-rows">
          <template x-for="role in available" :key="role.id"><label class="share-role" :class="{selected: left.includes(role.id)}"><input type="checkbox" x-model="left" :value="role.id"><span x-text="role.name"></span></label></template>
          <p class="share-empty" x-show="!available.length" x-cloak>{{ t.text("shares.empty") }}</p>
        </div>
      </section>
      <div class="share-arrows">
        <button class="btn icon" type="button" @click="grant()" :disabled="!left.length || !permissions.length" title="{{ t.text('shares.add') }}" aria-label="{{ t.text('shares.add') }}">{{ c.icon("arrow-right") }}</button>
        <button class="btn icon" type="button" @click="revoke()" :disabled="!right.length" title="{{ t.text('shares.remove') }}" aria-label="{{ t.text('shares.remove') }}">{{ c.icon("arrow-left") }}</button>
      </div>
      <section class="share-list" aria-labelledby="share-granted-title">
        <div class="share-list-head"><span id="share-granted-title">{{ t.text("shares.granted_roles") }}</span><button class="btn share-edit" type="button" aria-label="{{ t.text('shares.edit_permissions') }}" title="{{ t.text('shares.edit_permissions') }}" @click="apply()" :disabled="!right.length || !permissions.length">{{ c.icon("pencil") }}<span class="share-edit-label">{{ t.text("shares.edit_permissions") }}</span></button></div>
        <input class="share-search" type="search" x-model="rightSearch" placeholder="{{ t.text('shares.search') }}" aria-label="{{ t.text('shares.search_granted') }}">
        <label class="check share-select-all"><input type="checkbox" :checked="shared.length > 0 && shared.every(role => right.includes(role.id))" :disabled="!shared.length" @change="right = $event.target.checked ? shared.map(role => role.id) : []">{{ t.text("shares.select_all") }}</label>
        <div class="share-rows">
          <template x-for="role in shared" :key="role.id"><label class="share-role" :class="{selected: right.includes(role.id)}"><input type="checkbox" x-model="right" :value="role.id"><span class="share-role-name" x-text="role.name"></span><small class="share-summary" x-text="Object.keys(labels).filter(point => grants[role.id].includes(point)).map(point => labels[point]).join(' · ')"></small></label></template>
          <p class="share-empty" x-show="!shared.length" x-cloak>{{ t.text("shares.empty") }}</p>
        </div>
      </section>
    </div>
    <div class="share-footer"><span class="share-hint" x-show="dirty" x-cloak>{{ t.text("shares.unsaved") }}</span><div class="share-buttons"><button class="btn" type="button" @click="reset()" :disabled="!dirty || saving">{{ t.text("computers.cancel") }}</button><button class="btn p" type="submit" :disabled="!dirty || saving">{{ t.text("manage.save") }}</button></div></div>
  </form>
  <div hidden data-labels>{% for point in points %}<span data-point="{{ point }}">{{ t.text(point if share_kind == "computer" else "shares.action." ~ point.value.split('.')[1]) }}</span>{% endfor %}</div>
</div>