<!--
available classes for component type:
    material-text
    material-video
    material-image
    material-link (embedded-code)
    material-file
    material-test
    material-maurus
-->
<div class=&quot;material material-{{model.type}}&quot;><!-- .material-type -->
    <div class=&quot;material-icon&quot;>
        <span class=&quot;fa-stack fa-2x&quot;>
          <i class=&quot;fa fa-stack-2x&quot;></i>
          <i class=&quot;fa fa-stack-1x fa-inverse&quot;></i>
        </span>
    </div>
    <div class=&quot;material-body&quot;>
        <span class=&quot;material-header&quot;>
        {{#if isMaurus}}
            <a {{action 'openModal' 'modal.maurus-modal' material}} >{{model.title}}</a>
        {{else}}
            <a href=&quot;{{model.content}}&quot;>{{model.title}}</a>
        {{/if}}
        </span><!-- material header -->
        <div>{{model.description}}</div><!-- material description -->
    </div>
    <div class=&quot;material-footer font-sm&quot;>
        {{#if isMaurus}}
            <a href=&quot;#&quot; {{action 'openModal' 'modal.maurus-modal' material}}><i class=&quot;fa fa-eye&quot;></i> <span class=&quot;hidden-xs&quot;>Vaata</span></a>
        {{else}}
            <a href=&quot;{{model.content}}&quot;><i class=&quot;fa fa-eye&quot;></i> <span class=&quot;hidden-xs&quot;>Vaata</span></a>
        {{/if}}
        {{#if isAddedToEopik}}
            <span class=&quot;added-to&quot;><i class=&quot;fa fa-check&quot;></i> <span class=&quot;hidden-xs&quot;>Lisatud e-õpikusse</span></span>
        {{else}}
            <a {{action 'addToEopik'}} href=&quot;#&quot;><i class=&quot;fa fa-plus&quot;></i> <span class=&quot;hidden-xs&quot;>Lisa oma e-õpikusse</span></a>
        {{/if}}
        {{#if isAddedOrOwner}}
            <a {{action 'showSettings'}} href=&quot;#&quot;><i class=&quot;fa fa-cog&quot;></i> <span class=&quot;hidden-xs hidden-sm&quot;>{{if showSettings 'Vähem' 'Rohkem' }} seadeid</span></a>
        {{/if}}
        <span class=&quot;pull-right&quot;>
            <span class=&quot;margin-right-10&quot;><i class=&quot;fa fa-calendar hidden-lg hidden-md&quot;></i> <strong class=&quot;hidden-sm hidden-xs&quot;>Loodud: </strong>{{formattedDate}}</span>
            <span><i class=&quot;fa fa-user-plus hidden-lg hidden-md&quot;></i> <span class=&quot;hidden-sm hidden-xs&quot;>Lisatud</span> <strong>{{model.added_count}}</strong> <span class=&quot;hidden-sm hidden-xs&quot;>korda</span></span>
        </span>
    </div>
    {{#if showSettings}}
    <div class=&quot;material-settings font-sm&quot;>
        {{#if isAddedOrOwner}}
            {{#if isAddedToEopik}}
                <div><a {{action 'removeFromEopik'}} href=&quot;#&quot;>Eemalda oma e-õpikust</a></div>
            {{/if}}
            {{#if isOwner}}
                <div>
                    <strong>Materjal nähtav: </strong>
                    {{input type=&quot;checkbox&quot; name=&quot;visible_to_teachers&quot; checked=model.visible_to_teachers}} Õpetajatele
                    {{input type=&quot;checkbox&quot; name=&quot;visible_to_students&quot; checked=model.visible_to_students}} Õpilastele
                </div>
            {{/if}}
            <div><strong>Jaga oma gruppidega:</strong>
            <div class=&quot;btn-group&quot;>
  <button data-toggle=&quot;dropdown&quot; class=&quot;btn-small dropdown-toggle&quot;  data-placeholder=&quot;Please select&quot;>Checked option <span class=&quot;caret&quot;></span></button>
    <ul class=&quot;dropdown-menu&quot;>
    {{#each group in model.group }}
      <li><label>{{group.name}}
      {{#if model.is_added_group}}
            <span class=&quot;added-to&quot;><i class=&quot;fa fa-check&quot;></i></span>
        {{else}}
            <a {{action 'addToGroup'}} href=&quot;#&quot;><i class=&quot;fa fa-plus&quot;></i></a>
        {{/if}}</label></li>
      {{/each}}
    </ul>
</div></div>
        {{/if}}
    </div>
    {{/if}}
</div>