spina-admin-conferences-fork 2.1.1 → 3.0.0.rc3

data/app/views/spina/admin/conferences/conferences/_form_conference_details.html.haml

@@ -1,27 +1,34 @@
-.page-form{ data: { controller: 'spina--admin--conferences--select-options', 'spina--admin--conferences--select_options': { config_value: '{ "admin_conferences_conference_institution_id": { "value": "id", "text": "name" }, "admin_conferences_conference_room_ids": { "trigger": "admin_conferences_conference_institution_id", "key": "rooms", "value": "id", "text": "name" } }', record_value: @institutions } } }
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Conference.human_attribute_name :name
-    .page-form-control= f.text_field :name, placeholder: Spina::Admin::Conferences::Conference.human_attribute_name(:name), required: true, class: 'input-large'
+.-mt-6
+= render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Conference.human_attribute_name(:name)) do
+  = render Spina::Forms::TextFieldComponent.new(f, :name)
+= render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Conference.human_attribute_name(:start_date)) do
+  = f.date_field :start_date, value: (@conference.start_date.strftime("%Y-%m-%d") if @conference.start_date.present?), placeholder: Spina::Admin::Conferences::Conference.human_attribute_name(:start_date), class: 'form-input'
+= render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Conference.human_attribute_name(:finish_date)) do
+  = f.date_field :finish_date, value: (@conference.finish_date.strftime("%Y-%m-%d") if @conference.finish_date.present?), placeholder: Spina::Admin::Conferences::Conference.human_attribute_name(:finish_date), class: 'form-input'
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Conference.human_attribute_name :start_date
-    .page-form-control= f.date_field :start_date, value: (@conference.start_date.strftime("%Y-%m-%d") if @conference.start_date.present?), placeholder: Spina::Admin::Conferences::Conference.human_attribute_name(:start_date), required: true
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Conference.human_attribute_name :finish_date
-    .page-form-control= f.date_field :finish_date, value: (@conference.finish_date.strftime("%Y-%m-%d") if @conference.finish_date.present?), placeholder: Spina::Admin::Conferences::Conference.human_attribute_name(:finish_date), required: true
+.mt-6{ 'data-controller': 'repeater' }
+  %label.block.text-sm.leading-5.font-medium.text-gray-700= Spina::Admin::Conferences::Conference.human_attribute_name :events
+  .-mt-4.flex.flex-col.md:flex-row{ data: { 'controller': 'tabs', 'tabs-active': 'bg-spina-dark bg-opacity-10 text-gray-900', 'tabs-inactive': 'text-gray-500' }  }
+    .md:w-64.md:pr-6
 
-  .page-form-group{ class: dom_class(@conference.events) }
-    .page-form-label= Spina::Admin::Conferences::Conference.human_attribute_name :events
-    .page-form-control
-      .structure-form{ data: { controller: 'spina--admin--conferences--conference-events-form', 'spina--admin--conferences--conference_events_form': { active_class: 'active' } } }
-        .structure-form-menu
-          %ul= render partial: 'event_row', collection: f.object.events, as: :event
-          = link_to icon('plus'), @conference.new_record? ? new_admin_conferences_event_path : new_admin_conferences_conference_event_path(@conference, index: @conference.events.size), remote: true, class: %w[button button-link icon], data: { 'spina--admin--conferences--conference_events_form_target': 'addFormLink', disable_with: '' }
+      -# Fields for new event
+      - new_event = Spina::Admin::Conferences::Event.new
+      - fields = f.fields_for(:events, [new_event], child_index: new_event.object_id) { |ff| render('event_fields', f: ff) }.gsub('\n', '')
 
-        .structure-form-content{ data: { action: 'conferenceEventFieldsAdded->spina--admin--conferences--conference-events-form#updateURL' } }
-          = f.fields_for :events do |event_fields|
-            = render 'event_fields', f: event_fields
+      -# Tabs
+      .pt-6.-ml-3
+        %div{ data: { action: 'exists->tabs#added', 'repeater-target' => 'list', 'tabs-target' => 'list' } }
+          - (f.object.events || []).each.with_index do |event, index|
+            %button.text-gray-500.hover:text-gray-900.rounded-md.px-3.truncate.text-sm.font-medium.flex.items-center.w-full.h-9{ data: { 'action': 'tabs#show', 'pane-id': "pane_#{event.object_id}", 'repeater-target': 'listItem', 'tabs-target': 'button' }, type: 'button' }
+              %svg.w-4.h-4.mr-2{ fill: 'currentColor', viewbox: '0 0 448 512', xmlns: 'http://www.w3.org/2000/svg' }
+                %path{ d: 'M432 288H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-112H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z' }
+              = event&.name
+        %button.text-gray-400.pl-2.hover:text-gray-900.rounded-md.truncate.text-sm.font-medium.flex.items-center.w-full.h-10{ data: { 'action': 'repeater#addFields', 'child-index': "#{new_event.object_id}", 'fields': fields }, type: 'button' }
+          = heroicon 'plus', style: :solid, class: 'w-6 h-6 mr-1' 
+          = t 'spina.ui.new_entry'
 
-- unless @conference.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_conference_path(@conference), method: :delete, data: { confirm: t('.delete_confirmation', name: @conference.name) }, class: %w[button button-link button-danger]
+    -# Content
+    .flex-1.pl-6.md:pl-0{ 'data-repeater-target': 'content' }
+      = f.fields_for :events do |event_fields|
+        = render 'event_fields', f: event_fields

data/app/views/spina/admin/conferences/conferences/_form_delegates.html.haml

@@ -0,0 +1 @@
+= render partial: 'delegates', object: @conference.delegates

data/app/views/spina/admin/conferences/conferences/_form_parts.html.haml

@@ -1,8 +1,7 @@
-.page-form
-  = f.fields_for :"#{@locale}_content", @parts do |ff|
-    = ff.hidden_field :type, value: ff.object.class.name
-    = ff.hidden_field :title
-    = ff.hidden_field :name
+.-mt-6
+= f.fields_for :"#{@locale}_content", @parts do |ff|
+  = ff.hidden_field :type, value: ff.object.class
+  = ff.hidden_field :title
+  = ff.hidden_field :name
 
-    .page-form-group.page-part{ data: { name: ff.object.name } }
-      = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.name)}/form", f: ff
+  = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff

data/app/views/spina/admin/conferences/conferences/_form_presentation_types.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentation_types', object: @conference.presentation_types

data/app/views/spina/admin/conferences/conferences/_form_presentations.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentations', object: @conference.presentations

data/app/views/spina/admin/conferences/conferences/_form_rooms.html.haml

@@ -0,0 +1 @@
+= render partial: 'rooms', object: @conference.rooms

data/app/views/spina/admin/conferences/conferences/index.html.haml

@@ -1,7 +1,27 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_conference_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_conference_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
+  - header.navigation do
+    %nav.-mb-1.md:-mb-3.mt-4
+      %ul.inline-flex.w-auto.rounded-md.bg-white
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Conference.model_name.human(count: 0),
+                                                              admin_conferences_conferences_path,
+                                                              active: controller_name == 'conferences')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::PresentationType.model_name.human(count: 0),
+                                                              admin_conferences_presentation_types_path,
+                                                              active: controller_name == 'presentation_types')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Session.model_name.human(count: 0),
+                                                              admin_conferences_sessions_path,
+                                                              active: controller_name == 'sessions')
 
 = render partial: 'conferences', object: @conferences
-= link_to_next_page @conferences, 'Next'
+.ml-8.inline-flex
+  .btn.btn-primary= link_to_prev_page @conferences, 'Previous'
+  .btn.btn-primary= link_to_next_page @conferences, 'Next'

data/app/views/spina/admin/conferences/delegates/_delegate.html.haml

@@ -1,13 +1,11 @@
-%tr{ data: { delegate_id: delegate.id } }
-  %td= link_to delegate.full_name, edit_admin_conferences_delegate_path(delegate)
+%tr.border-b{ data: { delegate_id: delegate.id } }
+  %td= link_to delegate.full_name, edit_admin_conferences_delegate_path(delegate), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
   %td
-    = delegate.email_address
-    - unless delegate.email_address.blank?
-      = mail_to delegate.email_address, class: %w[button button-small button-link] do
-        = icon 'mail'
-        = t 'spina.email'
-  %td= delegate.institution.name
-  %td.align-right
-    = link_to edit_admin_conferences_delegate_path(delegate), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+    .block.font-light.text-sm.p-4= delegate.email_address
+  %td
+    .block.font-light.text-sm.p-4= delegate.institution.name
+  %td
+    = link_to edit_admin_conferences_delegate_path(delegate), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/delegates/_form.html.haml

@@ -1,24 +1,28 @@
-- if @delegate.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @delegate.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @delegate.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @delegate], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_delegate_path(@delegate), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', delegate: @delegate.full_name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon('check')
+      = button_tag type: :submit, form: dom_id(@delegate), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_delegates_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #delegate_details.tab-content.active= render 'form_delegate_details', f: f
-  #conferences.tab-content= render partial: 'conferences', object: @delegate.conferences
-  #presentations.tab-content= render partial: 'presentations', object: @delegate.presentations
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        .max-w-5xl= render "form_#{tab}"

data/app/views/spina/admin/conferences/delegates/_form_conferences.html.haml

@@ -0,0 +1 @@
+= render partial: 'conferences', object: @delegate.conferences

data/app/views/spina/admin/conferences/delegates/_form_delegate_details.html.haml

@@ -1,53 +1,24 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :name
-    .page-form-control
-      .input-group
-        = f.text_field :first_name, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:first_name), required: true, class: 'input-large'
-        = f.text_field :last_name, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:last_name), required: true, class: 'input-large'
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :institution
-    .page-form-control
-      .select-dropdown= f.collection_select :institution_id, Spina::Admin::Conferences::Institution.all, :id, :name, {}, required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :email_address
-    .page-form-control= f.email_field :email_address, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:email_address), required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :url
-    .page-form-control= f.url_field :url, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:url)
-
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Conferences::Delegate.human_attribute_name :dietary_requirements
-    .page-form-content
-      .well{ style: 'margin: 0' }
-        .table-container
-          %table.table{ style: 'margin: 0' }
-            %tbody
-              = f.collection_check_boxes :dietary_requirement_ids, Spina::Admin::Conferences::DietaryRequirement.all, :id, :name do |builder|
-                %tr
-                  %td{ style: "padding-left: 16px" }
-                    .form-checkbox
-                      = builder.check_box
-                      = builder.label
-
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Conferences::Delegate.human_attribute_name :conferences
-    .page-form-content
-      .well{ style: 'margin: 0' }
-        .table-container
-          %table.table{ style: 'margin: 0' }
-            %tbody
-              = f.collection_check_boxes :conference_ids, Spina::Admin::Conferences::Conference.all, :id, :name, {} do |builder|
-                %tr
-                  %td{ style: "padding-left: 16px" }
-                    .form-checkbox
-                      = builder.check_box
-                      = builder.label
-
-- unless @delegate.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_delegate_path(@delegate), method: :delete, data: { confirm: t('.delete_confirmation', delegate: @delegate.full_name) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @delegate], id: dom_id(@delegate), html: { autocomplete: 'off' } do |f|
+  .-mt-6
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:first_name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :first_name)
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:last_name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :last_name)
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:institution)) do
+    = f.collection_select :institution_id, Spina::Admin::Conferences::Institution.all, :id, :name, {}, class: 'form-select'
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:email_address)) do
+    = f.email_field :email_address, class: 'form-input block w-full max-w-5xl sm:text-sm sm:leading-5'
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:url)) do
+    = f.url_field :url, class: 'form-input block w-full max-w-5xl sm:text-sm sm:leading-5'
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:dietary_requirements)) do
+    %ul.list-none.ml-4
+      = f.collection_check_boxes :dietary_requirement_ids, Spina::Admin::Conferences::DietaryRequirement.all, :id, :name, {}, class: 'form-checkbox rounded' do |builder|
+        %li
+          = builder.check_box
+          %span.text-sm.font-medium.text-gray-600= builder.label
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:conferences)) do |builder|
+    %ul.list-none.ml-4
+      = f.collection_check_boxes :conference_ids, Spina::Admin::Conferences::Conference.all, :id, :name, {}, class: 'form-checkbox rounded' do |builder|
+        %li
+          = builder.check_box
+          %span.text-sm.font-medium.text-gray-600= builder.label

data/app/views/spina/admin/conferences/delegates/_form_presentations.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentations', object: @delegate.presentations

data/app/views/spina/admin/conferences/delegates/index.html.haml

@@ -1,13 +1,19 @@
-- content_for(:header_actions) do
-  %label.button{ for: 'file' }
-    = icon 'cog'
-    = t '.import'
-    = form_with url: import_admin_conferences_delegates_path do |f|
-      = f.submit style: 'display: none'
-      = f.file_field :file, multiple: false, style: 'display: none'
-  = link_to new_admin_conferences_delegate_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      %label.btn.btn-primary.w-full{ for: 'file' }
+        = heroicon 'cog', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.import'
+        = form_with url: import_admin_conferences_delegates_path do |f|
+          = f.submit style: 'display: none'
+          = f.file_field :file, multiple: false, style: 'display: none'
+
+    .ml-3
+      = link_to new_admin_conferences_delegate_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
 = render partial: 'delegates', object: @delegates
-= link_to_next_page @delegates, 'Next'
+.ml-8.inline-flex
+  .btn.btn-primary= link_to_prev_page @delegates, 'Previous'
+  .btn.btn-primary= link_to_next_page @delegates, 'Next'

data/app/views/spina/admin/conferences/dietary_requirements/_dietary_requirement.html.haml

@@ -1,6 +1,7 @@
-%tr{ data: { dietary_requirement_id: dietary_requirement.id } }
-  %td= link_to dietary_requirement.name, edit_admin_conferences_dietary_requirement_path(dietary_requirement)
-  %td.align-right
-    = link_to edit_admin_conferences_dietary_requirement_path(dietary_requirement), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { dietary_requirement_id: dietary_requirement.id } }
+  %td= link_to dietary_requirement.name, edit_admin_conferences_dietary_requirement_path(dietary_requirement), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    = link_to edit_admin_conferences_dietary_requirement_path(dietary_requirement), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/dietary_requirements/_form.html.haml

@@ -1,23 +1,28 @@
-- if @dietary_requirement.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @dietary_requirement.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @dietary_requirement.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @dietary_requirement], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_dietary_requirement_path(@dietary_requirement), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', dietary_requirement: @dietary_requirement.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@dietary_requirement), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_dietary_requirements_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #dietary_requirement_details.tab-content.active= render 'form_dietary_requirement_details', f: f
-  #delegates.tab-content= render partial: 'delegates', object: @dietary_requirement.delegates
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        .max-w-5xl= render "form_#{tab}"

data/app/views/spina/admin/conferences/dietary_requirements/_form_delegates.html.haml

@@ -0,0 +1 @@
+= render partial: 'delegates', object: @dietary_requirement.delegates

data/app/views/spina/admin/conferences/dietary_requirements/_form_dietary_requirement_details.html.haml

@@ -1,8 +1,4 @@
-%div{ style: 'margin-top: 40px' }
-  .horizontal-form
-    .horizontal-form-group
-      .horizontal-form-label= Spina::Admin::Conferences::DietaryRequirement.human_attribute_name :name
-      .horizontal-form-content= f.text_field :name, placeholder: Spina::Admin::Conferences::DietaryRequirement.human_attribute_name(:name), required: true
-
-- unless @dietary_requirement.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_dietary_requirement_path(@dietary_requirement), method: :delete, data: { confirm: t('.delete_confirmation', dietary_requirement: @dietary_requirement.name) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @dietary_requirement], id: dom_id(@dietary_requirement), html: { autocomplete: 'off' } do |f|
+  .-mt-6
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::DietaryRequirement.human_attribute_name(:name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :name)

data/app/views/spina/admin/conferences/dietary_requirements/index.html.haml

@@ -1,7 +1,11 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_dietary_requirement_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_dietary_requirement_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
 = render partial: 'dietary_requirements', object: @dietary_requirements
-= link_to_next_page @dietary_requirements, 'Next'
+.ml-8.inline-flex
+  .btn.btn-primary= link_to_prev_page @dietary_requirements, 'Previous'
+  .btn.btn-primary= link_to_next_page @dietary_requirements, 'Next'

data/app/views/spina/admin/conferences/institutions/_form.html.haml

@@ -1,24 +1,28 @@
-- if @institution.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @institution.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @institution.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @institution], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_institution_path(@institution), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', institution: @institution.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@institution), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_institutions_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #institution_details.tab-content.active= render 'form_institution_details', f: f
-  #rooms.tab-content= render partial: 'rooms', object: @institution.rooms
-  #delegates.tab-content= render partial: 'delegates', object: @institution.delegates
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        .max-w-5xl= render "form_#{tab}"

data/app/views/spina/admin/conferences/institutions/_form_delegates.html.haml

@@ -0,0 +1 @@
+= render partial: 'delegates', object: @institution.delegates

data/app/views/spina/admin/conferences/institutions/_form_institution_details.html.haml

@@ -1,29 +1,29 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Institution.human_attribute_name :name
-    .page-form-control= f.text_field :name, placeholder: Spina::Admin::Conferences::Institution.human_attribute_name(:name), required: true, class: 'input-large'
+= form_with model: [spina, :admin_conferences, @institution], id: dom_id(@institution), html: { autocomplete: 'off' } do |f|
+  .-mt-6
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Institution.human_attribute_name(:name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :name)
+  = render Spina::Admin::Conferences::FormGroupComponent.new(label: Spina::Admin::Conferences::Institution.human_attribute_name(:city)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :city)
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Institution.human_attribute_name :city
-    .page-form-control= f.text_field :city, placeholder: Spina::Admin::Conferences::Institution.human_attribute_name(:city), required: true
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Institution.human_attribute_name :logo
-    .page-form-content{ data: { controller: 'image-form' } }
-      .page-form-media-picker
-        %div{ style: 'width: 100%' }
-          = link_to admin_media_picker_path(selected_ids: [f.object.logo_id], input: "media_picker_#{f.object.object_id}", mode: 'single'), remote: true, class: 'image', data: { target: 'image-form.image' } do
-            .page-form-media-picker-placeholder= t 'spina.images.choose_image'
-            %div{ id: "media_picker_#{f.object.object_id}" }
-              = f.hidden_field :logo_id, data: { target: 'image-form.imageId' }
-              = f.hidden_field :logo_signed_blob_id, value: f.object.logo&.file&.signed_id, data: {target: 'image-form.signedBlobId'}
-              = f.hidden_field :logo_filename, value: f.object.logo&.file&.filename, data: {target: 'image-form.filename'}
-            %div{ style: 'width: 200px; height: 150px; overflow: hidden' }
-              - if f.object.logo.present?
-                = image_tag main_app.url_for(f.object.logo.variant(resize: '400x300^', crop: '400x300+0+0')), width: 200, height: 150
+  %div(class="mt-6 relative" data-controller="media-picker unique-id" data-unique-id="#{dom_id(f.object, f.object.object_id)}" data-action="media-picker:done->media-picker#handleDone")
+    %label(class="block text-sm leading-5 font-medium text-gray-700")
+      = Spina::Admin::Conferences::Institution.human_attribute_name :logo
 
-        = button_tag type: :default, class: 'button button-small button-default', data: { action: 'image-form#remove' } do
-          %i.icon.icon-cross{ style: 'margin: 0; font-size: 10px' }
+    = f.hidden_field :logo_signed_blob_id, data: { media_picker_target: 'signedBlobId' }
+    = f.hidden_field :logo_filename, data: { media_picker_target: 'filename' }
+    = f.hidden_field :logo_id, data: { media_picker_target: 'imageId' }
 
-- unless @institution.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_institution_path(@institution), method: :delete, data: { confirm: t('.delete_confirmation', institution: @institution.name) }, class: %w[button button-link button-danger]
+    %button(class="absolute mt-3 ml-2 z-10 cursor-pointer flex items-center h-9 px-2 rounded-md bg-gray-700 bg-opacity-50 border-gray-300 active:shadow-inner text-gray-200 hover:text-white text-sm font-medium leading-none leading-none shadow-sm" data-action="media-picker#removeImage" data-media-picker-target="clearButton" type="button")
+      %svg(class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor")
+        %path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16")
+    
+    = link_to spina.admin_media_picker_path(target: dom_id(f.object, f.object.object_id)), class: "block relative mt-1 w-full", data: {turbo_frame: "modal"} do
+      %div{class:"w-36 h-36 bg-transparent border-2 border-dashed border-gray-300 rounded-lg flex items-center flex-col justify-center"}
+        %svg.mx-auto.h-12.w-12.text-gray-400{ stroke: 'currentColor', fill:'none', viewBox: '0 0 48 48' }
+          %path{d: 'M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round'}
+        .text-gray-400.font-medium.text-sm= t 'spina.images.choose_image'
+      
+      %div(class="border absolute inset-0 w-36 h-36 bg-gray-100 rounded-lg shadow-md overflow-hidden" data-media-picker-target="thumbnail")
+        - if f.object.logo.present?
+          = image_tag thumbnail_url(f.object.logo), class: 'object-contain h-36 w-full', data: { controller: 'image-fade-in' }

data/app/views/spina/admin/conferences/institutions/_form_rooms.html.haml

@@ -0,0 +1 @@
+= render partial: 'rooms', object: @institution.rooms

data/app/views/spina/admin/conferences/institutions/_institution.html.haml

@@ -1,7 +1,9 @@
-%tr{ data: { institution_id: institution.id } }
-  %td= link_to institution.name, edit_admin_conferences_institution_path(institution)
-  %td= institution.city
-  %td.align-right
-    = link_to edit_admin_conferences_institution_path(institution), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { institution_id: institution.id } }
+  %td= link_to institution.name, edit_admin_conferences_institution_path(institution), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    .block.font-light.text-sm.p-4= institution.city
+  %td
+    = link_to edit_admin_conferences_institution_path(institution), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/institutions/index.html.haml

@@ -1,7 +1,24 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_institution_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_institution_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
+  - header.navigation do
+    %nav.-mb-1.md:-mb-3.mt-4
+      %ul.inline-flex.w-auto.rounded-md.bg-white
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Institution.model_name.human(count: 0),
+                                                              admin_conferences_institutions_path,
+                                                              active: controller_name == 'institutions')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Room.model_name.human(count: 0),
+                                                              admin_conferences_rooms_path,
+                                                              active: controller_name == 'rooms')
+        
 
 = render partial: 'institutions', object: @institutions
-= link_to_next_page @institutions, 'Next'
+.ml-8.inline-flex
+  .btn.btn-primary= link_to_prev_page @institutions, 'Previous'
+  .btn.btn-primary= link_to_next_page @institutions, 'Next'