{% var standard_perms = [
	{name: "read", label: __("Read"), disable_check: false},
	{name: "write", label: __("Write"), disable_check: true},
	{name: "submit", label: __("Submit"), disable_check: true},
	{name: "share", label: __("Share"), disable_check: false}
];

var custom_perms = (custom_perm_types || []).map(function(perm) {
	return {
		name: perm,
		label: __(frappe.model.unscrub(perm)),
		disable_check: true
	};
});

var all_perms = standard_perms.concat(custom_perms);
%}
<div>
	<div style="display: grid; grid-template-columns: 2fr repeat({%= all_perms.length %}, 1fr); gap: 8px; align-items: center;">
		<div><h6>{%= __("User") %}</h6></div>
		{% for (var i=0; i < all_perms.length; i++) { var perm = all_perms[i]; %}
			<div style="display: flex; justify-content: center; align-items: center;"><h6>{%= perm.label %}</h6></div>
		{% } %}
	</div>

	<div class="shared-user" data-everyone=1 style="display: grid; grid-template-columns: 2fr repeat({%= all_perms.length %}, 1fr); gap: 8px; align-items: center;">
		<div class="share-all"><b>{{ __("Everyone") }}</b></div>
		{% for (var i=0; i < all_perms.length; i++) {
			var perm = all_perms[i];
			var is_disabled = perm.disable_check && !frm.perm[0][perm.name]; %}
		<div style="display: flex; justify-content: center; align-items: center;">
			<input type="checkbox" name="{%= perm.name %}"
				{% if(cint(everyone[perm.name])) { %}checked{% } %}
				{% if (is_disabled) { %}disabled="disabled"{% } %}
				class="edit-share">
		</div>
		{% } %}
	</div>

	{% for (var i=0, l=shared.length; i < l; i++) {
		var s = shared[i]; %}
		{% if(s && !s.everyone) { %}
		<div class="shared-user" data-user="{%= s.user %}" data-name="{%= s.name %}" style="display: grid; grid-template-columns: 2fr repeat({%= all_perms.length %}, 1fr); gap: 8px; align-items: center;">
			<div>{%= s.user %}</div>
			{% for (var j=0; j < all_perms.length; j++) {
				var perm = all_perms[j];
				var is_disabled = perm.disable_check && !frm.perm[0][perm.name]; %}
			<div style="display: flex; justify-content: center; align-items: center;">
				<input type="checkbox" name="{%= perm.name %}"
					{% if(cint(s[perm.name])) { %}checked{% } %}
					{% if (is_disabled) { %}disabled="disabled"{% } %}
					class="edit-share">
			</div>
			{% } %}
		</div>
		{% } %}
	{% } %}

	{% if(frappe.model.can_share(null, frm)) { %}
	<hr>

	<div style="display: grid; grid-template-columns: 2fr repeat({%= all_perms.length %}, 1fr); gap: 8px; align-items: center;">
		<div><h6>{%= __("Share this document with") %}</h6></div>
		{% for (var i=0; i < all_perms.length; i++) {
			var perm = all_perms[i]; %}
		<div style="display: flex; justify-content: center; align-items: center;"><h6>{%= perm.label %}</h6></div>
		{% } %}
	</div>

	<div style="display: grid; grid-template-columns: 2fr repeat({%= all_perms.length %}, 1fr); gap: 8px; align-items: center;">
		<div class="input-wrapper-add-share"></div>
		{% for (var i=0; i < all_perms.length; i++) {
			var perm = all_perms[i];
			var is_disabled = perm.disable_check && !frm.perm[0][perm.name]; %}
		<div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 8px;">
			<input type="checkbox" class="add-share-{%= perm.name %}" name="{%= perm.name %}"
				{% if (is_disabled) { %}disabled="disabled"{% } %}>
		</div>
		{% } %}
	</div>
	<div>
		<button class="btn btn-primary btn-sm btn-add-share" style="margin-top: 12px;">{{ __("Add") }}</button>
	</div>
	{% endif %}
</div>