ditty 0.7.1 → 0.10.1

data/views/auth/reset_password.haml

@@ -1,19 +1,36 @@
-.row
-  .col-md-2
-  .col-md-8
-    .panel.panel-default
-      .panel-body
-        = edit_form_tag("#{settings.map_path}/auth/reset-password") do
-          %input{ name: 'token', value: params[:token], type: 'hidden' }
-          - if identity.errors[:password] && identity.errors[:password].include?('is not strong enough')
-            .alert.alert-warning
-              %p Make sure your password is at least 8 characters long, and including the following
-              %ul
-                %li Upper- and lowercase letters
-                %li Numbers
-                %li Special Characters
-          = form_control(:password, identity, type: 'password', placeholder: 'Your password', group: 'identity')
-          = form_control(:password_confirmation, identity, type: 'password', label: 'Confirm Password', placeholder: 'Confirm your password', group: 'identity')
-          %button.btn.btn-primary{ type: 'submit' }
-            Reset Password
-  .col-md-2
+.container
+  / Outer Row
+  .row.justify-content-center
+    .col-xl-10.col-lg-12.col-md-9
+      .card.card-default.o-hidden.border-0.shadow-lg.my-5
+        .card-body.p-0
+          / Nested Row within Card Body
+          .row
+            .col-lg-6.d-none.d-lg-block.bg-password-image
+            .col-lg-6
+              .p-5
+                .text-center
+                  %h1.h4.text-gray-900.mb-2
+                    Reset your Password
+                = edit_form_tag("#{settings.map_path}/auth/reset-password") do
+                  %input{ name: 'token', value: params[:token], type: 'hidden' }
+                  - if identity.errors[:password] && identity.errors[:password].include?('is not strong enough')
+                    .alert.alert-warning
+                      %p Make sure your password is at least 8 characters long, and including the following
+                      %ul
+                        %li Upper- and lowercase letters
+                        %li Numbers
+                        %li Special Characters
+                  = form_control(:password, identity, type: 'password', placeholder: 'Your password', group: 'identity')
+                  = form_control(:password_confirmation, identity, type: 'password', label: 'Confirm Password', placeholder: 'Confirm your password', group: 'identity')
+                  %button.btn.btn-primary{ type: 'submit' }
+                    Reset Password
+                %hr
+                - if policy(::Ditty::User).register?
+                  .text-center
+                    %a.small{ href: "#{settings.map_path}/auth/register" } Create an Account!
+                .text-center
+                  %a.small{ href: "#{settings.map_path}/auth/login" } Already have an account? Login!
+
+      .row.justify-content-center
+        .col-xl-10.col-lg-12.col-md-9

data/views/blank.haml

@@ -0,0 +1,43 @@
+!!! 5
+%html{ lang: 'en' }
+  %head
+    %meta{ charset: 'utf-8' }
+    %meta{ 'http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge,chrome=1' }
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    %meta{ name: 'theme-color', content: '#ffffff' }
+    = Rack::Csrf.csrf_metatag(env)
+    %link{ rel: 'manifest', href: '/manifest.json' }
+    %link{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/images/favicon-32x32.png' }
+    %link{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/images/favicon-16x16.png' }
+    %link{ rel: 'apple-touch-icon', sizes: '76x76', href: '/images/apple-icon.png' }
+    %link{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' }
+
+    %title
+      = config('ditty.title', 'Ditty')
+      - if defined? title
+        = "- #{title}"
+
+    %meta{ name: 'description', content: '' }
+    %meta{ name: 'author', content: '' }
+
+    / Le styles
+    %link{ rel: 'stylesheet', href: '/css/sb-admin-2.min.css', media: 'screen' }
+    %link{ rel: 'stylesheet', href: '/css/styles.css', media: 'screen' }
+    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css', media: 'screen' }
+  %body.bg-gradient-primary
+    = yield
+
+    / Placed at the end of the document so the pages load faster
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js' }
+    / %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js' }
+    %script{ type: 'text/javascript', src: '/js/sb-admin-2.min.js' }
+    %script{ type: 'text/javascript', src: '/js/scripts.js' }
+    :javascript
+        $(function() {
+            $('.select2').select2();
+        });
+

data/views/emails/forgot_password.haml

@@ -8,7 +8,7 @@
 		This reset is only valid for 24 hours
 
 %p.text-center
-	%a{ href: reset_url }
+	%a{ href: reset_url } Reset Password
 
 %p
 	For security purposes, if you did not request this password reset,

data/views/emails/layouts/action.haml

@@ -3,7 +3,8 @@
   %head
     %meta{:content => "width=device-width", :name => "viewport"}/
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %title Actionable emails e.g. reset password
+    %title
+      = subject
     :css
       img {
       max-width: 100%;
@@ -59,10 +60,13 @@
         %td.container{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;", :valign => "top", :width => "600"}
           .content{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;"}
             = content
-            - if defined? footer
-              .footer{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;"}
-                %table{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;", :width => "100%"}
-                  %tr{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"}
-                    %td.aligncenter.content-block{:align => "center", :style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;", :valign => "top"}
+            .footer{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;"}
+              %table{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;", :width => "100%"}
+                %tr{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"}
+                  %td.aligncenter.content-block{:align => "center", :style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;", :valign => "top"}
+                    - if defined? footer
                       = footer
+                    - else
+                      This email was sent to
+                      = to
         %td{:style => "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;", :valign => "top"}

data/views/emails/layouts/alert.haml

@@ -3,7 +3,8 @@
   %head
     %meta{:content => "width=device-width", :name => "viewport"}/
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %title Alerts e.g. approaching your limit
+    %title
+      = subject
     :css
       img {
       max-width: 100%;

data/views/emails/layouts/billing.haml

@@ -3,7 +3,8 @@
   %head
     %meta{:content => "width=device-width", :name => "viewport"}/
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %title Billing e.g. invoices and receipts
+    %title
+      = subject
     :css
       img {
       max-width: 100%;

data/views/embedded.haml

@@ -5,6 +5,7 @@
     %meta{ 'http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge,chrome=1' }
     %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
     %meta{ name: 'theme-color', content: '#ffffff' }
+    = Rack::Csrf.csrf_metatag(env)
     %link{ rel: 'manifest', href: '/manifest.json' }
     %link{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '#{request.base_url}/images/favicon-32x32.png' }
     %link{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '#{request.base_url}/images/favicon-16x16.png' }
@@ -20,14 +21,9 @@
     %meta{ name: 'author', content: '' }
 
     / Le styles
-    %link{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', media: 'screen' }
-    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css', media: 'screen' }
-    %link{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', media: 'screen' }
-    /[if lt IE 9] <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
-    /[if lt IE 9] <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
-
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/js/sb-admin-2.min.js' }
+    %link{ rel: 'stylesheet', href: '/css/sb-admin-2.min.css', media: 'screen' }
+    %link{ rel: 'stylesheet', href: '/css/styles.css', media: 'screen' }
+    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css', media: 'screen' }
   %body
     .container-fluid
       .row
@@ -37,6 +33,16 @@
       = yield
 
     / Placed at the end of the document so the pages load faster
-    %script{ type: 'text/javascript', src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js' }
+    / %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js' }
+    %script{ type: 'text/javascript', src: '/js/sb-admin-2.min.js' }
+    %script{ type: 'text/javascript', src: '/js/scripts.js' }
+    :javascript
+        $(function() {
+            $('.select2').select2();
+        });

data/views/error.haml

@@ -1,4 +1,9 @@
-%h2 Whoops!
+- if ENV['APP_ENV'] != 'production'
+  %p.lead
+    = error.class
+    %br
+    %small
+      = error.message
 
-%p.lead
-  = error.class
+  %pre
+    = error.backtrace.join("\n")

data/views/index.haml

@@ -1 +1 @@
-%h2 Hello! Ready to get this Ditty started?
+%h1.h3.mb-4.text-gray-800 Home Page

data/views/layout.haml

@@ -5,6 +5,7 @@
     %meta{ 'http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge,chrome=1' }
     %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
     %meta{ name: 'theme-color', content: '#ffffff' }
+    = Rack::Csrf.csrf_metatag(env)
     %link{ rel: 'manifest', href: '/manifest.json' }
     %link{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/images/favicon-32x32.png' }
     %link{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/images/favicon-16x16.png' }
@@ -12,7 +13,7 @@
     %link{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' }
 
     %title
-      Ditty
+      = config('ditty.title', 'Ditty')
       - if defined? title
         = "- #{title}"
 
@@ -20,43 +21,57 @@
     %meta{ name: 'author', content: '' }
 
     / Le styles
-    %link{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', media: 'screen' }
-    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css', media: 'screen' }
-    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css', media: 'screen' }
-    %link{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', media: 'screen' }
-    /[if lt IE 9] <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
-    /[if lt IE 9] <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
-
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/js/sb-admin-2.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js' }
-  %body
+    %link{ rel: 'stylesheet', href: '/css/sb-admin-2.min.css', media: 'screen' }
+    %link{ rel: 'stylesheet', href: '/css/styles.css', media: 'screen' }
+    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css', media: 'screen' }
+  %body#page-top
+    / Logout Modal
+    #logoutModal.modal.fade{ tabindex: -1, role: 'dialog', 'aria-hidden': 'true' }
+      .modal-dialog{ role: 'document' }
+        .modal-content
+          .modal-header
+            %h5.modal-title Ready to Leave?
+            %button.close{ type: 'button', 'data-dismiss': 'modal', 'aria-label': 'Close' }
+              %span{ 'aria-hidden': 'true' } ×
+          .modal-body
+            Select "Logout" below if you are ready to end your current session.
+          .modal-footer
+            %button.btn.btn-secondary{ type: 'button', 'data-dismiss': 'modal' } Cancel
+            = delete_form_tag("#{settings.map_path}/auth") do
+              %button.btn.btn-primary{ type: 'submit' } Logout
+    / Page Wrapper
     #wrapper
-      = haml :'partials/navbar', locals: { title: (defined?(title) ? title : 'Ditty') }
-      #page-wrapper
-        -if defined?(title) || defined?(actions)
-          .row
-            %h1.col-md-9= defined?(title) ? title : '&nbsp;'
-            .col-md-3.text-right{ style: 'margin-top: 20px' }
-              = haml :'partials/actions', locals: { actions: defined?(actions) ? actions : {} }
-        -else
-          %div{ style: 'padding-top: 20px' }
-
-        .row
-          .col-md-12
+      = haml :'partials/sidebar', locals: { title: (defined?(title) ? title : 'Ditty') }
+
+      #content-wrapper.d-flex.flex-column
+        #content
+          = haml :'partials/topbar'
+          .container-fluid
+            / TODO
+            / .row
+            /   .col-md-12
             = haml :'partials/notifications'
 
-        = yield
+            = yield
+
         = haml :'partials/footer'
 
+    / Scroll to Top Button
+    %a.scroll-to-top.rounded{ href: '#page-top' }
+      %i.fas.fa-angle-up
+
     / Placed at the end of the document so the pages load faster
-    %script{ type: 'text/javascript', src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js' }
-    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js' }
+    / %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js' }
+    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js' }
+    %script{ type: 'text/javascript', src: '/js/sb-admin-2.min.js' }
+    %script{ type: 'text/javascript', src: '/js/scripts.js' }
     :javascript
         $(function() {
-            $('.sidebar-nav').metisMenu();
             $('.select2').select2();
         });
 

data/views/partials/actions.haml

@@ -1,14 +1,15 @@
-- if actions.count > 1
-  - link, text = actions.shift
-  .btn-group.text-right
-    %a.btn.btn-primary{ href: link }= text
-    %button.btn.btn-primary.dropdown-toggle{ type: 'button', id: 'actions-toggle', data: { toggle: 'dropdown' } }
-      %span.caret
-      %span.sr-only Toggle Dropdown
-    %ul.dropdown-menu{ 'aria-labelledby': 'actions-toggle' }
-      -actions.each do |k, v|
-        %li
-          %a{ href: k }= v
-- elsif actions.count > 0
-  -actions.each do |k, v|
-    %a.btn.btn-primary{ href: k }= v
+- if defined?(actions)
+  - if actions.count > 1
+    - link, text = actions.shift
+    .btn-group.text-right
+      %a.btn.btn-primary{ href: link }= text
+      %button.btn.btn-primary.dropdown-toggle{ type: 'button', id: 'actions-toggle', data: { toggle: 'dropdown' } }
+        %span.caret
+        %span.sr-only Toggle Dropdown
+      %ul.dropdown-menu{ 'aria-labelledby': 'actions-toggle' }
+        -actions.each do |k, v|
+          %li
+            %a{ href: k }= v
+  - elsif actions.count > 0
+    -actions.each do |k, v|
+      %a.btn.btn-primary{ href: k }= v

data/views/partials/delete_form.haml

@@ -1,2 +1,2 @@
-= delete_form_tag "#{base_path}/#{entity.id}" do
+= delete_form_tag "#{base_path}/#{entity.display_id}" do
   %button.btn.btn-danger{ type: 'submit' }= delete_label

data/views/partials/filter_control.haml

@@ -1,6 +1,6 @@
-.form-group
+.form-group{ class: total_filters.to_i > 4 ? 'col-3' : 'col-md'}
   %label{ for: "filter_#{name}" }= label
-  %select.form-control{ name: name, id: "filter_#{name}" }
+  %select.form-control.select2{ style: 'width: 100%', name: name, id: "filter_#{name}" }
     %option{ value: '' } -- Select One --
     - options.each do |k,v| k ||= v;  v ||= k;
       %option{ value: k, selected: (params[name].eql? k)}= v

data/views/partials/footer.haml

@@ -1,5 +1,13 @@
-%footer.footer.text-muted.text-center
-  %hr
-  .copyright
-    :plain
-      &copy; <script>document.write(new Date().getFullYear())</script>, Ditty
+/ Footer
+%footer.sticky-footer.bg-light
+  .container.my-auto
+    -if ENV['SKIP_BRANDING'].blank?
+      .copyright.text-center.my-auto.text-dark
+        %p
+          Copyright &copy;
+          %a{ href: 'https://hackerpla.net/requestd', target: '_blank' }
+            HackerPlanet
+          2020
+        %p.mb-0
+          %a{ href: 'https://hackerpla.net/requestd', target: '_blank' }
+            %img.rounded{ src: 'http://hackerpla.net/wp-content/uploads/2014/07/HP_1C_128x128.png', height: 60 }

data/views/partials/form_control.haml

@@ -1,20 +1,31 @@
-%div{ class: "form-group#{model.errors[field] ? ' has-error' : ''}" }
-  %label.col-sm-3.control-label{ for: attributes[:id] }= label
-  .col-sm-9
-    - type = attributes.delete(:type)
-    - if type == 'select'
-      - options = attributes.delete(:options)
-      %select{attributes}
+- type = attributes.delete(:type)
+- attributes[:value] ||= model.send(field) || default
+- if help_text
+  - attributes[:'aria-describedby'] = "#{attributes[:id]}_helptext"
+- if type == 'hidden'
+  %input{attributes, type: type, value: model.send(field) || default}
+- else
+  .form-group
+    - if type != 'file'
+      %label{ for: attributes[:id] }= label
+      - if type == 'select'
+        - options = attributes.delete(:options)
+        - value = attributes.delete(:value)
         - if attributes[:multiple]
-          - options.each do |k,v| k ||= v;  v ||= k;
-            %option{ value: k, selected: (model.send(field).map(&:id).include? k)}= v
-        - else
-          %option{ value: ""} -- Select One --
-          - options.each do |k,v| k ||= v;  v ||= k;
-            %option{ value: k, selected: [model[field].to_s, default].include?(k.to_s)}= v
-    - elsif type == 'textarea'
-      %textarea{attributes}= preserve(model[field])
-    - else
-      %input{attributes, type: type, value: model[field] || default}
-    - if model.errors[field]
-      %p.help-block.text-danger= model.errors[field].join(', ')
+          - attributes[:name] = "#{attributes[:name]}[]" unless attributes[:name][-2..-1] == '[]'
+        %select{attributes}
+          - if attributes[:multiple]
+            - options.each do |k, v| k = v if k.nil?; v = k if v.nil?;
+              %option{ value: k.to_s, selected: value&.include?(k) }= v
+          - else
+            %option{ value: "" } -- Select One --
+            - options.each do |k, v| k = v if k.nil?; v = k if v.nil?;
+              %option{ value: k.to_s, selected: value == k }= v
+      - elsif type == 'textarea'
+        %textarea{attributes}= preserve(model.send(field) || default)
+      - else
+        %input{ attributes, type: type }
+      - if model.errors[field]
+        .invalid-feedback= model.errors[field].join(', ')
+      - if help_text
+        %small.form-text.text-muted{ id: "#{attributes[:id]}_helptext" }= help_text