feat: hide danger zone form elements if the user is not allowed to use them

refs #290

src/components/shows/AHousekeeping.vue

@@ -5,18 +5,24 @@
   >
     <AFieldset class="tw-bg-white" :title="t('show.housekeeping.title')">
       <div class="tw-flex tw-gap-6 tw-flex-wrap">
-        <AHousekeepingSection :title="t('show.housekeeping.flows.archival')">
-          <AShowArchivalFlow :show="show" />
-        </AHousekeepingSection>
-        <AHousekeepingSection :title="t('show.housekeeping.flows.deletion')">
-          <AShowDeletionFlow :show="show" />
-        </AHousekeepingSection>
-        <AHousekeepingSection
-          :title="t('show.housekeeping.flows.slugRenaming')"
-          class="tw-flex-[2] tw-max-w-xl"
-        >
-          <AShowSlugRenamingFlow :show="show" />
-        </AHousekeepingSection>
+        <APermissionGuard show-permissions="program.edit__show__is_active">
+          <AHousekeepingSection :title="t('show.housekeeping.flows.archival')">
+            <AShowArchivalFlow :show="show" />
+          </AHousekeepingSection>
+        </APermissionGuard>
+        <APermissionGuard show-permissions="program.delete_show">
+          <AHousekeepingSection :title="t('show.housekeeping.flows.deletion')">
+            <AShowDeletionFlow :show="show" />
+          </AHousekeepingSection>
+        </APermissionGuard>
+        <APermissionGuard show-permissions="program.edit__show__slug">
+          <AHousekeepingSection
+            :title="t('show.housekeeping.flows.slugRenaming')"
+            class="tw-flex-[2] tw-max-w-xl"
+          >
+            <AShowSlugRenamingFlow :show="show" />
+          </AHousekeepingSection>
+        </APermissionGuard>
       </div>
     </AFieldset>
   </div>
@@ -30,6 +36,7 @@ import AShowDeletionFlow from '@/components/shows/AShowDeletionFlow.vue'
 import AShowSlugRenamingFlow from '@/components/shows/AShowSlugRenamingFlow.vue'
 import AHousekeepingSection from '@/components/shows/AHousekeepingSection.vue'
 import AFieldset from '@/components/generic/AFieldset.vue'
+import APermissionGuard from '@/components/generic/APermissionGuard.vue'
 
 defineProps<{
   show: Show

src/components/shows/AShowArchivalFlow.vue

 <template>
-  <FormGroup
-    v-slot="{ disabled }"
-    :errors="isActive.errors"
-    edit-permissions="program.edit__show__is_active"
-  >
+  <FormGroup :errors="isActive.errors">
     <div>
       <template v-if="isActive.value">
         <button
           type="button"
           class="btn btn-default tw-w-full tw-justify-center"
-          :disabled="disabled"
           @click="confirmShowDeactivation"
         >
           <Loading v-if="isActive.isSaving" class="tw-h-2" />

src/components/shows/AShowDeletionFlow.vue

 <template>
-  <FormGroup v-slot="{ disabled }" :errors="errors" edit-permissions="program.delete_show">
+  <FormGroup :errors="errors">
     <div>
       <button
         type="button"
         class="btn btn-default tw-w-full tw-justify-center"
-        :disabled="disabled"
         @click="confirmDeleteShow"
       >
         <Loading v-if="isProcessing" class="tw-h-2" />

src/components/shows/AShowSlugRenamingFlow.vue

 <template>
-  <FormGroup v-slot="attrs" :errors="slug.errors" edit-permissions="program.edit__show__slug">
+  <FormGroup v-slot="attrs" :errors="slug.errors">
     <div>
       <div class="tw-flex tw-gap-2 tw-flex-wrap">
         <input v-model="newSlug" type="text" v-bind="attrs" class="tw-min-w-48 tw-flex-[2]" />