         @p => @raw 'A <code>.list-tree</code> is a special case of <code>.list-group</code>.'
         @p => @raw '<code>.list-tree.has-collapsable-children</code> gives the children with nested items disclosure arrows.'
         @exampleCode '''
-          <ul class="list-tree has-collapsable-children">
-            <li class="list-nested-item">
-              <div class="list-item"><span class="icon icon-file-directory">A Directory</span></div>
-              <ul class="list-tree">
-                <li class="list-nested-item">
-                  <div class="list-item"><span class="icon icon-file-directory">Nested Directory</span></div>
-                  <ul class="list-tree">
-                    <li class="list-item"><span class="icon icon-file-text">File one</span></li>
-                  </ul>
-                </li>
-                <li class="list-nested-item collapsed">
-                  <div class="list-item"><span class="icon icon-file-directory">Collpased Nested Directory</span></div>
-                  <ul class="list-tree">
-                    <li class="list-item"><span class="icon icon-file-text">File one</span></li>
-                  </ul>
-                </li>
-                <li class="list-item"><span class="icon icon-file-text">File one</span></li>
-                <li class="list-item"><span class="icon icon-file-text">File two</span></li>
-                <li class="list-item selected">
-                  <span class="icon icon-file-text">File three .selected!</span>
-                </li>
-              </ul>
-            </li>
-            <li class="list-item"><span class="icon icon-file-text">.icon-file-text</span></li>
-            <li class="list-item"><span class="icon icon-file-symlink-file">.icon-file-symlink-file</span></li>
-            <li class="list-item"><span class="icon icon-file-submodule">.icon-file-submodule</span></li>
-            <li class="list-item"><span class="icon icon-file-media">.icon-file-media</span></li>
-          </ul>
+          @ul class: 'list-tree has-collapsable-children', =>
+            @li class: 'list-nested-item', =>
+              @div class: 'list-item', =>
+                @span class: 'icon icon-file-directory', 'A Directory'
+              @ul class: 'list-tree', =>
+                @li class: 'list-nested-item', =>
+                  @div class: 'list-item', =>
+                    @span class: 'icon icon-file-directory', 'Nested Directory'
+                  @ul class: 'list-tree', =>
+                    @li class: 'list-item', =>
+                      @span class: 'icon icon-file-text', 'File one'
+                @li class: 'list-nested-item collapsed', =>
+                  @div class: 'list-item', =>
+                    @span class: 'icon icon-file-directory', 'Collpased Nested Directory'
+                  @ul class: 'list-tree', =>
+                    @li class: 'list-item', =>
+                      @span class: 'icon icon-file-text', 'File one'
+                @li class: 'list-item', =>
+                  @span class: 'icon icon-file-text', 'File one'
+                @li class: 'list-item selected', =>
+                  @span class: 'icon icon-file-text', 'File three .selected!'
+            @li class: 'list-item', =>
+              @span class: 'icon icon-file-text', '.icon-file-text'
+            @li class: 'list-item', =>
+              @span class: 'icon icon-file-symlink-file', '.icon-file-symlink-file'
         '''
 
       @section class: 'bordered', 'data-name': 'overlay', =>

          @raw item

    html = $('<div/>').append(selectList).html()
    exhtml = html.replace(/</g, '&lt;')

    @div class: 'example-code', =>
      @div class: 'example', =>
        @subview '__', selectList
      @pre =>
        @code =>
          @raw exhtml


  @deserialize: (options={}) ->


        @h2 'Basic example with one item selected'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @ol class: 'list-group', =>
              @li class: 'selected', 'one'
              @li 'two'
              @li 'three'
        '''

        @h2 'Single line with icons'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @ol class: 'list-group', =>
              @li class: 'selected', =>
                @div class: 'status status-added icon icon-diff-added', ''
                @div class: 'icon icon-file-text', 'Some file'
              @li =>
                @div class: 'status status-modified icon icon-diff-modified', ''
                @div class: 'icon icon-file-text', 'Another file'
              @li =>
                @div class: 'status status-removed icon icon-diff-removed', ''
                @div class: 'icon icon-file-text', 'Yet another file'
        '''

        @h2 'Multiple lines with no icons'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @ol class: 'list-group', =>
              @li class: 'two-lines', =>
                @div class: 'primary-line', 'Primary line'
                @div class: 'secondary-line', 'Secondary line'
              @li class: 'two-lines selected', =>
                @div class: 'primary-line', 'A thing'
                @div class: 'secondary-line', 'Description of the thing'
        '''

        @h2 'Using multiple lines with icons'
        @p => @raw 'Use ...'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @ol class: 'list-group', =>
              @li class: 'two-lines', =>
                @div class: 'status status-added icon icon-diff-added', ''
                @div class: 'primary-line icon icon-file-text', 'Primary line'
                @div class: 'secondary-line no-icon', 'Secondary line'
              @li class: 'two-lines selected', =>
                @div class: 'status status-modified icon icon-diff-modified', ''
                @div class: 'primary-line icon icon-file-symlink-file', 'A thing'
                @div class: 'secondary-line no-icon', 'Description of the thing'
              @li class: 'two-lines', =>
                @div class: 'status status-renamed icon icon-diff-renamed', ''
                @div class: 'primary-line icon icon-file-symlink-file', 'A thing'
                @div class: 'secondary-line no-icon', 'Description of the thing'
        '''

        @h2 'Using mark-active class to indicate the active item'
        @p => @raw 'Use ...'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @ol class: 'list-group mark-active', =>
              @li 'Normal item'
              @li class: 'selected', 'Selected &mdash; user is arrowing through the list.'
              @li class: 'active', 'This is the active item'
              @li class: 'selected active', 'Selected AND Active!'
        '''

        @h2 'Error messages'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @div class: 'editor editor-colors mini', 'I searched for this'
            @div class: 'error-message', 'Nothing has been found!'
        '''

        @h2 'Loading message'
        @exampleCode '''
          @div class: 'overlay from-top select-list', =>
            @div class: 'editor editor-colors mini', 'User input'
            @div class: 'loading', =>
              @span class: 'loading-message', 'Chill, bro. Things are loading.'
              @span class: 'badge', '1234'
        '''

      @section class: 'bordered', 'data-name': 'error-messages', =>
