<div class="container">

  <!-- ARCHITECTURE -->
  <cardgrid
    carddimension="normal"
    dndenabled="false"
    family="architecture"
    items="$ctrl.architecturecardgriditems"
    pageheadertitle="jsp.architecture.h1"
    selectfunction="$ctrl.architectureItemSelect(id)"
    type="half-top">
  </cardgrid>

  <!-- STRANDS -->
  <cardgrid
    carddimension="small"
    dndenabled="true"
    dropfunction="$ctrl.strandMove(draggedObjectId, destinationObjectId)"
    family="strands"
    emptylisttext="jsp.architecture.bibiscoEmptyThumbnailListBoxStrands.text"
    emptylistbuttonlabel="jsp.strands.a.createFirstStrand"
    emptylistbuttontooltip="{{'strand_firstcreate_tooltip'+$root.os}}"
    emptylistbuttonfunction="$ctrl.createStrand()"
    items="$ctrl.strandcardgriditems"
    pageheaderbuttonhotkey="$ctrl.hotkeys"
    pageheaderbuttonlabel="jsp.architecture.a.createStrand"
    pageheaderbuttonfunction="$ctrl.createStrand()"
    pageheaderbuttontooltip="{{'strand_create_tooltip'+$root.os}}"
    pageheadertitle="jsp.architecture.strands.h2"
    pageheadersubtitle="jsp.architecture.strands.h2.small" 
    pageheadertipcode="strandsdndTip"
    selectfunction="$ctrl.strandSelect(id)"
    type="half-bottom">
  </cardgrid>

</div>
