<div class="card__layout">
  <figure class="card__img card__img--avatar">
    {{#link-to "channel" host.name target="_blank"}}
      <img title="{{host.displayName}}"
        src="{{or host.logo 'https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png'}}"
        alt="{{host.displayName}}"
      >
    {{/link-to}}
  </figure>
  <div class="card__body">
    {{#link-to "channel" host.name target="_blank"}}
      <h3 class="card__title js-host-details__display-name ellipsis">
        {{host.displayName}}
      </h3>
    {{/link-to}}
  </div>

  {{#if shouldShowAutohostAdd}}
    <div class="autohost-card__action">
      {{#if added}}
        {{#common/button-element onClick=(action 'removeFromList') isHollow=true testSelector='remove-button'}}
          <figure>{{svg-icon path='svg/followcheck'}}</figure>
          <span>{{i18n 'Added'}}</span>
        {{/common/button-element}}
      {{else}}
        {{#common/button-element onClick=(action 'addToList') isHollow=true testSelector='add-button'}}
          <span>{{i18n 'Add to auto host'}}</span>
        {{/common/button-element}}
      {{/if}}
    </div>
  {{/if}}
</div>
