testio-tailwind 0.1.0 → 0.2.1

package/src/pages/examples/splitview-testcases.haml

@@ -1,478 +1,478 @@
----
-layout: page-example.njk
-title: "Splitview Test Case Executions"
-tags: "examples"
----
-%nav.sidebar{arialabel:'Sidebar'}
-  %a.navlink.active{href:'#'}
-    %span.navlink-badge.icon.icon-home
-    Navlink active
-  %a.navlink{href:'#'}
-    %span.navlink-badge.icon.icon-bug
-    Navlink
-  %details
-    %summary.navlink-container
-      .navlink
-        %span.navlink-badge.icon.icon-product
-        Navlink collapsable
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-  %a.navlink{href:'#'}
-    %span.navlink-badge.icon.icon-bug-reproduction
-    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
-%main.splitview-layout#ds-splitview-demo
-  .splitview-header
-    %h1 Splitview layout
-    %p This is the header which will be independent from the 2 columns.
-  .splitview-list-header
-    %h3.splitview-list-header-title 4 Executions
-    .splitview-list-header-actions
-      %details.dropdown-actions.dropright
-        %summary
-          %a.link-with-icon{href:""}
-            .icon.icon-sort-az
-            A-Z (desc)
-        .popover-menu
-          %a.popover-action{href:'#'}
-            %span.icon.icon-sort-descending
-            Severity (desc)
-          %a.popover-action{href:'#'}
-            %span.icon.icon-sort-ascending
-            Severity (asc)
-          %a.popover-action{href:'#'}
-            %span.icon.icon-sort-number-ascending
-            Age (old to new)
-          %a.popover-action{href:'#'}
-            %span.icon.icon-sort-number-descending
-            Age (new to old)
-          %a.popover-action{href:'#'}
-            %span.icon.icon-sort-az
-            Title A-Z
-          %a.popover-action{href:'#'}
-            %span.icon.icon-sort-za
-            Title Z-A
-      %a.linked-icon{href:""}
-        .icon.icon-filter
-      %a.linked-icon{href:""}
-        .icon.icon-search
-  .splitview-list
-    %details.splitview-group
-      %summary.splitview-item
-        .splitview-item-icon.icon.icon-circle.danger
-        .splitview-item-text
-          .splitview-item-title Splitview group title / Test Case title
-          .splitview-item-metainfo
-            = "#123321321 | Meta info"
-        .splitview-item-status
-          .text-with-icon
-            .icon.icon-testcase-bug
-            2
-      .splitview-item#ds-splitview-demo-item
-        .splitview-item-icon.icon.icon-cross-circle-filled.danger
-        .splitview-item-text
-          %span.icon.icon-computer-windows.mr-icon-spacing
-          %span.icon.icon-chrome.mr-icon-spacing
-          Windows 10 | Chrome
-        .splitview-item-status
-          .text-with-icon
-            .icon.icon-testcase-bug
-            2
-      .splitview-item
-        .splitview-item-icon.icon.icon-check-circle-filled.success
-        .splitview-item-text
-          %span.icon.icon-computer-windows.mr-icon-spacing
-          %span.icon.icon-chrome.mr-icon-spacing
-          Windows 10 | Chrome
-    %details.splitview-group
-      %summary.splitview-item
-        .splitview-item-icon.icon.icon-circle.success
-        .splitview-item-text
-          .splitview-item-title Splitview group title / Test Case title
-          .splitview-item-metainfo
-            = "#123321321 | Meta info"
-      .splitview-item
-        .splitview-item-icon.icon.icon-check-circle-filled.success
-        .splitview-item-text
-          %span.icon.icon-smartphone-apple.mr-icon-spacing
-          %span.icon.icon-safari.mr-icon-spacing
-          iOS 18 | Safari
-      .splitview-item
-        .splitview-item-icon.icon.icon-circle.success
-        .splitview-item-text
-          %span.icon.icon-tablet-android.mr-icon-spacing
-          %span.icon.icon-chrome.mr-icon-spacing
-          Android 15 | Brave
-  .splitview-details
-    .splitview-details-emptystate.empty-state-message.search Please select an item from the list to view its details.
-    .splitview-details-content
-      .splitview-details-header
-        %h3.splitview-details-title Details / Test Case Execution title
-        %a.btn.btn-sm.btn-square.btn-close-detailview#ds-demo-close-splitview{href: "#"}
-          .icon.icon-cross
-      %section.splitview-details-meta
-        %dl.list-splitview-meta
-          %dt Status
-          %dd
-            .text-with-icon
-              .status-icon.status-testcase-failed
-              Failed
-          %dt Tester
-          %dd
-            %details.dropdown-actions
-              %summary
-                .user-item.linked.sm
-                  %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                  User item with actions
-              .popover-menu
-                %a.popover-action{href:'#'}
-                  %span.icon.text-icon-default.icon-user-story-test
-                  Tester profile
-                %a.popover-action{href:'#'}
-                  %span.icon.text-icon-default.icon-review-exclamation
-                  Report tester
-          %dt Device
-          %dd
-            %span.icon.icon-computer-windows.mr-icon-spacing
-            %span.icon.icon-chrome.mr-icon-spacing
-            Windows 10 | Chrome
-          %dt Execution ID
-          %dd #1799709
-        %section
-          .section-header
-            %h5.section-title Steps
-          .list-listitems
-            %details.listitem
-              %summary.listitem-header
-                .listitem-badge.success
-                  .counter 1
-                .listitem-title Passed
-                .listitem-actions
-                  .btn.collapse-btn
-              .listitem-content
-                .listitem-subheadline Step description
-                .listitem-card
-                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-            %details.listitem
-              %summary.listitem-header
-                .listitem-badge.danger
-                  .counter 2
-                .listitem-title Failed
-                .listitem-metrics
-                  .listitem-metric
-                    .icon.icon-testcase-bug
-                    1
-                .listitem-actions
-                  .btn.collapse-btn
-              .listitem-content
-                .listitem-subheadline Step description
-                .listitem-card
-                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-                .listitem-subheadline Bugs
-                %details.listitem
-                  %summary.listitem-header
-                    .listitem-badge
-                      .icon.icon-testcase-bug
-                    .listitem-title Test Case Bug
-                    .listitem-actions
-                      .btn.collapse-btn
-                  .listitem-content
-                    %section.splitview-details-content-grid
-                      .label URL
-                      %a{href: ""} https://www.url.com
-                      .label Steps
-                      .markdown
-                        %ol
-                          %li login as crowd AUTOMATOR
-                          %li Join a project, complete some automation task, and LEAVE the project
-                          %li Login as project owner to perform review
-                          %li Start to review the automated task and reject it approval
-                      .label Actual result
-                      .markdown
-                        %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-                      .label Expected result
-                      .markdown
-                        %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-                    %section
-                      .section-header
-                        %h5.section-title Attachments
-                      .attachments
-                        .attachment
-                          %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
-                            %img{src:'/assets/images/placeholders/bugdetails.png'}
-                          %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
-                        .attachment
-                          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
-                            %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
-                          %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-                        .attachment
-                          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
-                            .attachment-icon.icon-xl.icon-review-xl
-                          %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-                    %section
-                      .section-header
-                        %h5.section-title Reported on
-                      .list-devices.mb-sm
-                        .device
-                          .device-icon.icon-lg.icon-computer-windows-lg
-                          .device-info
-                            Desktop | Windows 11
-                            %ul.browser-list
-                              %li.icon.icon-chrome
-                              %li.icon.icon-edge-chromium
-                    %section
-                      .section-header
-                        %h5.section-title Comments
-                      .list-chat-messages
-                        .chat-message-item
-                          %details.dropdown-actions.chat-avatar
-                            %summary
-                              .user-item.linked
-                                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                            .popover-menu
-                              %a.popover-action{href:'#'}
-                                %span.icon.icon-user-story-test
-                                Tester profile
-                              %a.popover-action{href:'#'}
-                                %span.icon.icon-review-exclamation
-                                Report tester
-                          .chat-header
-                            2 hours by 
-                            .chat-author Message sender
-                          .chat-message
-                            Here's a message Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                          .chat-actions
-                            .btn
-                              .icon.icon-heart
-                        .chat-message-item
-                          %details.dropdown-actions.chat-avatar
-                            %summary
-                              .user-item.linked
-                                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                            .popover-menu
-                              %a.popover-action{href:'#'}
-                                %span.icon.icon-user-story-test
-                                Tester profile
-                              %a.popover-action{href:'#'}
-                                %span.icon.icon-review-exclamation
-                                Report tester
-                          .chat-header
-                            2 hours by 
-                            .chat-author Message sender with a much much longer name
-                          .chat-message
-                            Here's a short message which you liked.
-                            .chat-message-addons
-                              %details.popover-wrapper.dropup
-                                %summary.btn
-                                  .icon.icon-heart-filled
-                                  1
-                                .popover-menu.info
-                                  .popover-title 1 person likes this
-                                  .popover-content You
-                          .chat-actions
-                            .btn
-                              .icon.icon-heart-filled
-                %details.listitem
-                  %summary.listitem-header
-                    .listitem-badge
-                      .icon.icon-testcase-bug
-                    .listitem-title Another Test Case Bug
-                    .listitem-actions
-                      .btn.collapse-btn
-                  .listitem-content
-                    .listitem-subheadline Listitem-card
-                    .listitem-card
-                      %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-                    .listitem-subheadline Listitem-card
-                    .listitem-card
-                      %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-            %details.listitem
-              %summary.listitem-header
-                .listitem-badge.success
-                  .counter 3
-                .listitem-title Passed
-                .listitem-actions
-                  .btn.collapse-btn
-              .listitem-content
-                .listitem-subheadline Step description
-                .listitem-card
-                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-        %section
-          .section-header
-            %h5.section-title Bugs
-          .list-listitems
-            %details.listitem.white
-              %summary.listitem-header
-                .listitem-badge
-                  .icon.icon-testcase-bug
-                .listitem-title Test Case Bug
-                .listitem-actions
-                  .btn.collapse-btn
-              .listitem-content
-                %section.splitview-details-content-grid
-                  .label URL
-                  %a{href: ""} https://www.url.com
-                  .label Steps
-                  .markdown
-                    %ol
-                      %li login as crowd AUTOMATOR
-                      %li Join a project, complete some automation task, and LEAVE the project
-                      %li Login as project owner to perform review
-                      %li Start to review the automated task and reject it approval
-                  .label Actual result
-                  .markdown
-                    %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-                  .label Expected result
-                  .markdown
-                    %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-                %section
-                  .section-header
-                    %h5.section-title Attachments
-                  .attachments
-                    .attachment
-                      %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
-                        %img{src:'/assets/images/placeholders/bugdetails.png'}
-                      %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
-                    .attachment
-                      %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
-                        %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
-                      %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-                    .attachment
-                      %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
-                        .attachment-icon.icon-xl.icon-review-xl
-                      %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-                %section
-                  .section-header
-                    %h5.section-title Reported on
-                  .list-devices.mb-sm
-                    .device
-                      .device-icon.icon-lg.icon-computer-windows-lg
-                      .device-info
-                        Desktop | Windows 11
-                        %ul.browser-list
-                          %li.icon.icon-chrome
-                          %li.icon.icon-edge-chromium
-                %section
-                  .section-header
-                    %h5.section-title Comments
-                  .list-chat-messages
-                    .chat-message-item
-                      %details.dropdown-actions.chat-avatar
-                        %summary
-                          .user-item.linked
-                            %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                        .popover-menu
-                          %a.popover-action{href:'#'}
-                            %span.icon.icon-user-story-test
-                            Tester profile
-                          %a.popover-action{href:'#'}
-                            %span.icon.icon-review-exclamation
-                            Report tester
-                      .chat-header
-                        2 hours by 
-                        .chat-author Message sender
-                      .chat-message
-                        Here's a message Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                      .chat-actions
-                        .btn
-                          .icon.icon-heart
-                    .chat-message-item
-                      %details.dropdown-actions.chat-avatar
-                        %summary
-                          .user-item.linked
-                            %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                        .popover-menu
-                          %a.popover-action{href:'#'}
-                            %span.icon.icon-user-story-test
-                            Tester profile
-                          %a.popover-action{href:'#'}
-                            %span.icon.icon-review-exclamation
-                            Report tester
-                      .chat-header
-                        2 hours by 
-                        .chat-author Message sender with a much much longer name
-                      .chat-message
-                        Here's a short message which you liked.
-                        .chat-message-addons
-                          %details.popover-wrapper.dropup
-                            %summary.btn
-                              .icon.icon-heart-filled
-                              1
-                            .popover-menu.info
-                              .popover-title 1 person likes this
-                              .popover-content You
-                      .chat-actions
-                        .btn
-                          .icon.icon-heart-filled
-            %details.listitem.white
-              %summary.listitem-header
-                .listitem-badge
-                  .icon.icon-testcase-bug
-                .listitem-title Another Test Case Bug
-                .listitem-actions
-                  .btn.collapse-btn
-              .listitem-content
-                .listitem-subheadline Listitem-card
-                .listitem-card
-                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-                .listitem-subheadline Listitem-card
-                .listitem-card
-                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-  %footer.splitview-list-actionbar
-    %button.btn.btn-default.btn-primary
-      %span.icon.icon-check-circle-filled.mr-icon-spacing
-      Primary
-    %button.btn.btn-default.btn-secondary
-      %span.icon.icon-check-circle-filled.mr-icon-spacing
-      Secondary
-    %button.btn.btn-default.btn-info
-      %span.icon.icon-check-circle-filled.mr-icon-spacing
-      Info
-    %details.dropdown-actions.dropup.dropright
-      %summary
-        .btn.btn-square.btn-secondary
-          .icon.text-icon-default.icon-more
-      .popover-menu
-        %a.popover-action{href:'#'}
-          %span.icon.text-icon-default.icon-pencil
-          Edit
-        %a.popover-action{href:'#'}
-          %span.icon.text-icon-default.icon-duplicate
-          Duplicate
-        %a.popover-action{href:'#'}
-          %span.icon.text-icon-default.icon-remove
-          Delete
-    %button.btn-intercom
-      %span.icon.icon-intercom
-  %footer.splitview-details-actionbar
-    %button.btn.btn-default.btn-primary
-      %span.icon.icon-check-circle-filled.mr-icon-spacing
-      Primary
-    %button.btn.btn-default.btn-secondary
-      %span.icon.icon-check-circle-filled.mr-icon-spacing
-      Secondary
-    %details.dropdown-actions.dropup.dropright
-      %summary
-        .btn.btn-square.btn-secondary
-          .icon.text-icon-default.icon-more
-      .popover-menu
-        %a.popover-action{href:'#'}
-          %span.icon.text-icon-default.icon-pencil
-          Edit
-        %a.popover-action{href:'#'}
-          %span.icon.text-icon-default.icon-duplicate
-          Duplicate
-        %a.popover-action{href:'#'}
-          %span.icon.text-icon-default.icon-remove
-          Delete
-    %button.btn-intercom
+---
+layout: page-example.njk
+title: "Splitview Test Case Executions"
+tags: "examples"
+---
+%nav.sidebar{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.navlink-badge.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink-container
+      .navlink
+        %span.navlink-badge.icon.icon-product
+        Navlink collapsable
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug-reproduction
+    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
+%main.splitview-layout#ds-splitview-demo
+  .splitview-header
+    %h1 Splitview layout
+    %p This is the header which will be independent from the 2 columns.
+  .splitview-list-header
+    %h3.splitview-list-header-title 4 Executions
+    .splitview-list-header-actions
+      %details.dropdown-actions.dropright
+        %summary
+          %a.link-with-icon{href:""}
+            .icon.icon-sort-az
+            A-Z (desc)
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-descending
+            Severity (desc)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-ascending
+            Severity (asc)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-number-ascending
+            Age (old to new)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-number-descending
+            Age (new to old)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-az
+            Title A-Z
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-za
+            Title Z-A
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+  .splitview-list
+    %details.splitview-group
+      %summary.splitview-item
+        .splitview-item-icon.icon.icon-circle.danger
+        .splitview-item-text
+          .splitview-item-title Splitview group title / Test Case title
+          .splitview-item-metainfo
+            = "#123321321 | Meta info"
+        .splitview-item-status
+          .text-with-icon
+            .icon.icon-testcase-bug
+            2
+      .splitview-item#ds-splitview-demo-item
+        .splitview-item-icon.icon.icon-cross-circle-filled.danger
+        .splitview-item-text
+          %span.icon.icon-computer-windows.mr-icon-spacing
+          %span.icon.icon-chrome.mr-icon-spacing
+          Windows 10 | Chrome
+        .splitview-item-status
+          .text-with-icon
+            .icon.icon-testcase-bug
+            2
+      .splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text
+          %span.icon.icon-computer-windows.mr-icon-spacing
+          %span.icon.icon-chrome.mr-icon-spacing
+          Windows 10 | Chrome
+    %details.splitview-group
+      %summary.splitview-item
+        .splitview-item-icon.icon.icon-circle.success
+        .splitview-item-text
+          .splitview-item-title Splitview group title / Test Case title
+          .splitview-item-metainfo
+            = "#123321321 | Meta info"
+      .splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text
+          %span.icon.icon-smartphone-apple.mr-icon-spacing
+          %span.icon.icon-safari.mr-icon-spacing
+          iOS 18 | Safari
+      .splitview-item
+        .splitview-item-icon.icon.icon-circle.success
+        .splitview-item-text
+          %span.icon.icon-tablet-android.mr-icon-spacing
+          %span.icon.icon-chrome.mr-icon-spacing
+          Android 15 | Brave
+  .splitview-details
+    .splitview-details-emptystate.empty-state-message.search Please select an item from the list to view its details.
+    .splitview-details-content
+      .splitview-details-header
+        %h3.splitview-details-title Details / Test Case Execution title
+        %a.btn.btn-sm.btn-square.btn-close-detailview#ds-demo-close-splitview{href: "#"}
+          .icon.icon-cross
+      %section.splitview-details-meta
+        %dl.list-splitview-meta
+          %dt Status
+          %dd
+            .text-with-icon
+              .status-icon.status-testcase-failed
+              Failed
+          %dt Tester
+          %dd
+            %details.dropdown-actions
+              %summary
+                .user-item.linked.sm
+                  %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                  User item with actions
+              .popover-menu
+                %a.popover-action{href:'#'}
+                  %span.icon.text-icon-default.icon-user-story-test
+                  Tester profile
+                %a.popover-action{href:'#'}
+                  %span.icon.text-icon-default.icon-review-exclamation
+                  Report tester
+          %dt Device
+          %dd
+            %span.icon.icon-computer-windows.mr-icon-spacing
+            %span.icon.icon-chrome.mr-icon-spacing
+            Windows 10 | Chrome
+          %dt Execution ID
+          %dd #1799709
+        %section
+          .section-header
+            %h5.section-title Steps
+          .list-listitems
+            %details.listitem
+              %summary.listitem-header
+                .listitem-badge.success
+                  .counter 1
+                .listitem-title Passed
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Step description
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+            %details.listitem
+              %summary.listitem-header
+                .listitem-badge.danger
+                  .counter 2
+                .listitem-title Failed
+                .listitem-metrics
+                  .listitem-metric
+                    .icon.icon-testcase-bug
+                    1
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Step description
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+                .listitem-subheadline Bugs
+                %details.listitem
+                  %summary.listitem-header
+                    .listitem-badge
+                      .icon.icon-testcase-bug
+                    .listitem-title Test Case Bug
+                    .listitem-actions
+                      .btn.collapse-btn
+                  .listitem-content
+                    %section.splitview-details-content-grid
+                      .label URL
+                      %a{href: ""} https://www.url.com
+                      .label Steps
+                      .markdown
+                        %ol
+                          %li login as crowd AUTOMATOR
+                          %li Join a project, complete some automation task, and LEAVE the project
+                          %li Login as project owner to perform review
+                          %li Start to review the automated task and reject it approval
+                      .label Actual result
+                      .markdown
+                        %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                      .label Expected result
+                      .markdown
+                        %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                    %section
+                      .section-header
+                        %h5.section-title Attachments
+                      .attachments
+                        .attachment
+                          %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                            %img{src:'/assets/images/placeholders/bugdetails.png'}
+                          %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
+                        .attachment
+                          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                            %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
+                          %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                        .attachment
+                          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                            .attachment-icon.icon-xl.icon-review-xl
+                          %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                    %section
+                      .section-header
+                        %h5.section-title Reported on
+                      .list-devices.mb-sm
+                        .device
+                          .device-icon.icon-lg.icon-computer-windows-lg
+                          .device-info
+                            Desktop | Windows 11
+                            %ul.browser-list
+                              %li.icon.icon-chrome
+                              %li.icon.icon-edge-chromium
+                    %section
+                      .section-header
+                        %h5.section-title Comments
+                      .list-chat-messages
+                        .chat-message-item
+                          %details.dropdown-actions.chat-avatar
+                            %summary
+                              .user-item.linked
+                                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                            .popover-menu
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-user-story-test
+                                Tester profile
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-review-exclamation
+                                Report tester
+                          .chat-header
+                            2 hours by 
+                            .chat-author Message sender
+                          .chat-message
+                            Here's a message Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                          .chat-actions
+                            .btn
+                              .icon.icon-heart
+                        .chat-message-item
+                          %details.dropdown-actions.chat-avatar
+                            %summary
+                              .user-item.linked
+                                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                            .popover-menu
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-user-story-test
+                                Tester profile
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-review-exclamation
+                                Report tester
+                          .chat-header
+                            2 hours by 
+                            .chat-author Message sender with a much much longer name
+                          .chat-message
+                            Here's a short message which you liked.
+                            .chat-message-addons
+                              %details.popover-wrapper.dropup
+                                %summary.btn
+                                  .icon.icon-heart-filled
+                                  1
+                                .popover-menu.info
+                                  .popover-title 1 person likes this
+                                  .popover-content You
+                          .chat-actions
+                            .btn
+                              .icon.icon-heart-filled
+                %details.listitem
+                  %summary.listitem-header
+                    .listitem-badge
+                      .icon.icon-testcase-bug
+                    .listitem-title Another Test Case Bug
+                    .listitem-actions
+                      .btn.collapse-btn
+                  .listitem-content
+                    .listitem-subheadline Listitem-card
+                    .listitem-card
+                      %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+                    .listitem-subheadline Listitem-card
+                    .listitem-card
+                      %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+            %details.listitem
+              %summary.listitem-header
+                .listitem-badge.success
+                  .counter 3
+                .listitem-title Passed
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Step description
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+        %section
+          .section-header
+            %h5.section-title Bugs
+          .list-listitems
+            %details.listitem.white
+              %summary.listitem-header
+                .listitem-badge
+                  .icon.icon-testcase-bug
+                .listitem-title Test Case Bug
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                %section.splitview-details-content-grid
+                  .label URL
+                  %a{href: ""} https://www.url.com
+                  .label Steps
+                  .markdown
+                    %ol
+                      %li login as crowd AUTOMATOR
+                      %li Join a project, complete some automation task, and LEAVE the project
+                      %li Login as project owner to perform review
+                      %li Start to review the automated task and reject it approval
+                  .label Actual result
+                  .markdown
+                    %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                  .label Expected result
+                  .markdown
+                    %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                %section
+                  .section-header
+                    %h5.section-title Attachments
+                  .attachments
+                    .attachment
+                      %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                        %img{src:'/assets/images/placeholders/bugdetails.png'}
+                      %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
+                    .attachment
+                      %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                        %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
+                      %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                    .attachment
+                      %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                        .attachment-icon.icon-xl.icon-review-xl
+                      %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                %section
+                  .section-header
+                    %h5.section-title Reported on
+                  .list-devices.mb-sm
+                    .device
+                      .device-icon.icon-lg.icon-computer-windows-lg
+                      .device-info
+                        Desktop | Windows 11
+                        %ul.browser-list
+                          %li.icon.icon-chrome
+                          %li.icon.icon-edge-chromium
+                %section
+                  .section-header
+                    %h5.section-title Comments
+                  .list-chat-messages
+                    .chat-message-item
+                      %details.dropdown-actions.chat-avatar
+                        %summary
+                          .user-item.linked
+                            %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                        .popover-menu
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-user-story-test
+                            Tester profile
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-review-exclamation
+                            Report tester
+                      .chat-header
+                        2 hours by 
+                        .chat-author Message sender
+                      .chat-message
+                        Here's a message Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                      .chat-actions
+                        .btn
+                          .icon.icon-heart
+                    .chat-message-item
+                      %details.dropdown-actions.chat-avatar
+                        %summary
+                          .user-item.linked
+                            %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                        .popover-menu
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-user-story-test
+                            Tester profile
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-review-exclamation
+                            Report tester
+                      .chat-header
+                        2 hours by 
+                        .chat-author Message sender with a much much longer name
+                      .chat-message
+                        Here's a short message which you liked.
+                        .chat-message-addons
+                          %details.popover-wrapper.dropup
+                            %summary.btn
+                              .icon.icon-heart-filled
+                              1
+                            .popover-menu.info
+                              .popover-title 1 person likes this
+                              .popover-content You
+                      .chat-actions
+                        .btn
+                          .icon.icon-heart-filled
+            %details.listitem.white
+              %summary.listitem-header
+                .listitem-badge
+                  .icon.icon-testcase-bug
+                .listitem-title Another Test Case Bug
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Listitem-card
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+                .listitem-subheadline Listitem-card
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+  %footer.splitview-list-actionbar
+    %button.btn.btn-default.btn-primary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+    %button.btn.btn-default.btn-info
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Info
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-square.btn-secondary
+          .icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+    %button.btn-intercom
+      %span.icon.icon-intercom
+  %footer.splitview-details-actionbar
+    %button.btn.btn-default.btn-primary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-square.btn-secondary
+          .icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+    %button.btn-intercom
       %span.icon.icon-intercom