Packages
phoenix_kit
1.7.28
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/modules/posts/web/group_edit.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title={@page_title}
current_path={@url_path}
project_title={@project_title}
>
<div class="container flex flex-col mx-auto px-4 py-6">
<%!-- Header Section --%>
<header class="w-full relative mb-6">
<%!-- Back Button (Left aligned) --%>
<.link
navigate={Routes.path("/admin/posts/groups")}
class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
>
<.icon name="hero-arrow-left" class="w-4 h-4" /> Back to Groups
</.link>
<%!-- Title Section --%>
<div class="text-center">
<h1 class="text-4xl font-bold text-base-content mb-3">{@page_title}</h1>
<p class="text-lg text-base-content">
<%= if @group.id do %>
Edit your group details and settings
<% else %>
Create a new collection to organize your posts
<% end %>
</p>
</div>
</header>
<%!-- Main Content --%>
<div class="max-w-3xl mx-auto">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<.form
for={@form}
id="group-form"
phx-change="validate"
phx-submit="save"
class="space-y-6"
>
<%!-- Group Name --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Group Name *</span>
</label>
<.input
field={@form[:name]}
type="text"
placeholder="e.g., Product Updates, Travel Photos, Recipes"
required
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
A descriptive name for this collection
</span>
</label>
</div>
<%!-- Description --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Description</span>
</label>
<.textarea
field={@form[:description]}
placeholder="Optional description of what this group contains..."
rows="3"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Help yourself remember what this group is for
</span>
</label>
</div>
<%!-- Slug --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">URL Slug *</span>
</label>
<.input
field={@form[:slug]}
type="text"
placeholder="auto-generated-from-name"
required
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
URL-friendly identifier. Leave empty to auto-generate from name.
</span>
</label>
<%!-- Slug Format Help --%>
<div class="alert alert-info mt-2">
<.icon name="hero-information-circle" class="w-5 h-5" />
<div class="text-sm">
<p class="font-semibold mb-1">Slug Format:</p>
<p class="text-xs">
Only lowercase letters, numbers, and hyphens. Must be unique among your groups.
</p>
<div class="mt-2 space-y-1">
<p class="text-xs text-success">
✓ Valid: <code>my-collection</code>, <code>photos-2025</code>,
<code>recipes</code>
</p>
<p class="text-xs text-error">
✗ Invalid: <code>My Collection</code>, <code>photos_2025</code>,
<code>-recipes</code>
</p>
</div>
</div>
</div>
</div>
<%!-- Visibility --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Visibility</span>
</label>
<.select
field={@form[:visibility]}
options={[
{"Public - Visible to everyone", "public"},
{"Private - Only visible to you", "private"}
]}
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Control who can see this group and its posts
</span>
</label>
</div>
<%!-- Info Box for Existing Group --%>
<%= if @group.id do %>
<div class="alert">
<.icon name="hero-information-circle" class="w-5 h-5" />
<div class="text-sm">
<p class="font-semibold">Editing Existing Group</p>
<p class="text-xs mt-1">
Created on {Calendar.strftime(@group.inserted_at, "%B %d, %Y")}
</p>
</div>
</div>
<% end %>
<%!-- Action Buttons --%>
<div class="flex flex-col sm:flex-row gap-4 justify-end">
<button
type="button"
phx-click="cancel"
class="btn btn-ghost btn-outline"
>
<.icon name="hero-x-mark" class="w-4 h-4 mr-2" /> Cancel
</button>
<button
type="submit"
class="btn btn-primary"
phx-disable-with="Saving..."
>
<.icon name="hero-check" class="w-4 h-4 mr-2" />
{if @group.id, do: "Update Group", else: "Create Group"}
</button>
</div>
</.form>
</div>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>