<!-- sage cmd carousel template -->
<span data-bind="text: name"></span>
<div data-bind="if: tileList.length > 0">
  <ul class="demarrage horizontal-carousel">
    <div data-bind="foreach: tileList"> 
      <div data-bind="if: enable > 0">
        <li>
          <div data-bind="if: data.url.length > 0 && data.tips != '#EDI' , attr: { title: data.tips, 'class': isFirstAndLast ? 'firstImage lastImage' : (isFirst ? 'firstImage' : (isLast ? 'lastImage' : '')) }">
            <a target="blank" data-bind="if: true, attr: { href: data.url }">
              <img border="0" data-bind=" attr: { src: data.icon }, style: { background: backgroudColor }">
              <span class="cmdbottom" data-bind="style: { background: darckBackgroudColor }"><span class="cmdbottomtxt" data-bind="    text: data.name"></span></span>
            </a>
          </div>
          <div data-bind="if: data.url.length < 1 && data.tips != '#EDI', attr: {title: data.tips, 'class': isFirstAndLast ? 'firstImage lastImage' : (isFirst ? 'firstImage' : (isLast ? 'lastImage' : '')) }">	    
            <a data-bind="click: data.methods.executeCmd">
              <span class="imga" data-bind="style: { background: backgroudColor }">
              <img border="0" data-bind="    attr: { src:data.icon}"></span>
              <span class="cmdbottom" data-bind="attr: { href: data.url }, style: { background: darckBackgroudColor }"><span class="cmdbottomtxt" data-bind="    text: data.name"></span></span>
            </a>	
          </div>
          <div style="position: relative" data-bind="if: data.url.length > 0 && data.tips == '#EDI' , attr: { 'class': isFirstAndLast ? 'firstImage lastImage' : (isFirst ? 'firstImage' : (isLast ? 'lastImage' : '')) }">
            <span class="cmdbottomvalue" data-bind="text: data.count"></span>
            <a target="blank" data-bind="if: true, attr: { href: data.url }">
              <img border="0" data-bind=" attr: { src: data.icon }, style: { background: backgroudColor }">
              <span class="cmdbottom" data-bind="style: { background: darckBackgroudColor }"><span class="cmdbottomtxt" data-bind="    text: data.name"></span></span>
            </a>
          </div>
          <div style="position: relative" data-bind="if: data.url.length < 1 && data.tips == '#EDI', attr: { 'class': isFirstAndLast ? 'firstImage lastImage' : (isFirst ? 'firstImage' : (isLast ? 'lastImage' : '')) }">	    
            <span class="cmdbottomvalue" data-bind="text: data.count"></span>
            <a data-bind="click: data.methods.executeCmd">
              <span class="imga" data-bind="style: { background: backgroudColor }">
              <img border="0" data-bind="    attr: { src:data.icon}"></span>
              <span class="cmdbottom" data-bind="attr: { href: data.url }, style: { background: darckBackgroudColor }"><span class="cmdbottomtxt" data-bind="    text: data.name"></span></span>
            </a>	
          </div>
        </li>
      </div>
      <div class="disable" data-bind="ifnot: enable > 0">
        <li>
          <div data-bind="attr: { 'class': isFirstAndLast ? 'firstImage lastImage' : (isFirst ? 'firstImage' : (isLast ? 'lastImage' : '')) }">
            <span class="imga"><img border="0" data-bind="attr: { src:data.icon }"></span>
			<span class="cmdbottom" data-bind="style: { background: darckBackgroudColor }"><span class="cmdbottomtxt" data-bind="    text: data.name"></span></span>
          </div>
        </li>  
      </div>
    </div>
  </ul>
  <div class="grey-bg1" style="margin-top:-128px;" data-bind="click: function (data, event) { methods.moveRigth($(event.currentTarget), 139) }">
    <div class="left-arrow1"><img border="0" data-bind="attr: { src: $root.sagepmeUi + 'img/left1.png' }" width="8" height="16"></div>
  </div>
  <div class="grey-bg2" style="margin-top:-128px;" data-bind="click: function (data, event) { methods.moveLeft($(event.currentTarget), 139) }">
    <div class="right-arrow1"><img border="0" data-bind="attr: { src: $root.sagepmeUi + 'img/right1.png' }" width="8" height="16"></div>
  </div>
</div>