Replace Bento views by Bootstrap views for image templates

src/api/app/views/webui/image_templates/index.html.haml

@@ -1,49 +1,52 @@
-.grid_16
-  %h1
-    Choose a base template
+- @pagetitle = 'Image template'
 
-  %fieldset.templateslist
-    - first_template = nil
-    - @projects.each do |project|
-      - remote = Project.is_remote_project?(project.name)
-      %dl.templateslist
-        %dt
-          = link_to_if(!remote, title_or_name(project), project_show_path(project))
-        - project.packages.each do |template|
-          %label
-            %input{ name: 'image', type: 'radio', class: 'hidden image_template', checked: check_first(first_template), data: { project: project, package: template } }
-            - first_template ||= template
-            %dd
-              %span.form-radio
-              - if template.has_icon?
-                %img{ alt: template.title, src: template.public_source_path('_icon') }
-              - else
-                = sprite_tag('drive-optical-48')
-              %span.group
-                %span.name.break-words
-                  = link_to_if(!remote, title_or_name(template), package_show_path(project: project, package: template))
-                %span.description.grey.break-words
-                  = template.description
-        - if project.packages.empty?
-          %p
-            There are currently no base image templates available for project
-            = succeed '.' do
-              %strong= title_or_name(project)
-  - if first_template
-    .templates_form
+.card
+  .card-body
+    %h3.mb-4 Choose a base template
+
+    .mb-3
+      - first_template = nil
+      - @projects.each do |project|
+        - remote = Project.is_remote_project?(project.name)
+        .row
+          .col-12.font-weight-bold
+            = link_to_if(!remote, title_or_name(project), project_show_path(project))
+          .col-12
+            .row
+              - project.packages.each_with_index do |template, index|
+                .col-12.col-md-6.col-lg-4.my-4
+                  .image-template-box{ class: "#{'active' if first_template.nil?}" }
+                    .custom-control.custom-radio
+                      %input{ name: 'image', type: 'radio', class: 'image_template custom-control-input', id: "#{project}-#{index}",
+                              checked: check_first(first_template), data: { project: project, package: template } }
+                      %label.custom-control-label{ for: "#{project}-#{index}" }
+                        - first_template ||= template
+                        .d-flex
+                          = image_template_icon(template)
+                          .pl-3
+                            = link_to_if(!remote, title_or_name(template), package_show_path(project: project, package: template))
+                            %small.description.text-muted.d-block= template.description
+          - if project.packages.empty?
+            %p
+              There are currently no base image templates available for project
+              = succeed '.' do
+                %strong= title_or_name(project)
+    - if first_template
+      %hr
       = form_tag({ controller: :package, action: :branch }, method: :post, id: 'appliance_form') do
-        = hidden_field_tag 'linked_project', first_template.project
-        = hidden_field_tag 'linked_package', first_template.name
-        = hidden_field_tag 'add_repositories_rebuild', 'copy'
-        = hidden_field_tag 'current_revision', true
-        = label_tag(:target_package, 'Name your appliance', class: 'name_appliance')
-        %span
-          (Maximum of 200 characters, no blank, /, :, - or ; characters)
-        %br
-        = text_field_tag(:target_package, first_template, class: 'name_appliance_form', required: true)
-        = submit_tag('Create appliance', class: 'create_appliance', disabled: !User.session ? true : nil)
-  - elsif @projects.empty?
-    %p
-      There are no templates yet, sorry.
+        .form-group
+          = hidden_field_tag 'linked_project', first_template.project
+          = hidden_field_tag 'linked_package', first_template.name
+          = hidden_field_tag 'add_repositories_rebuild', 'copy'
+          = hidden_field_tag 'current_revision', true
+          = label_tag(:target_package, 'Name your appliance')
+          %abbr.text-danger{ title: 'required' } *
+          = text_field_tag(:target_package, first_template, class: 'form-control', required: true)
+          %small.text-muted (Maximum of 200 characters, no blank, /, :, - or ; characters)
+        = submit_tag('Create appliance', class: 'btn btn-sm btn-primary px-4', disabled: !User.session ? true : nil,
+                                         data: { disable_with: 'Creating appliance...' })
+    - elsif @projects.empty?
+      %p There are no templates yet, sorry.
+
 - content_for :ready_function do
   setupImageTemplates();