<!-- BEGIN: MAIN -->

<div class="<!-- IF {PHP.show_search_onlvl1} == 'mobile' -->m-visible<!-- ENDIF --><!-- IF {PHP.show_search_onlvl1} == 'pc' -->m-hidden<!-- ENDIF -->">
 <!-- Надпись выше категории 
 <div class="categoriesHeader">
    <h1>{CATDATA.title}</h1>
    <div class="categoriesDescriptionc">{CATDATA.hint}</div>
  </div>-->
  <div class="lg-centerwrap clearfix centerwrap">
    <div id="subcategoriesRow" class="collageSubcategories">
      <!-- BEGIN: CATS_ROW -->
      <div class="collageSubcategories-col">
        <a href="{CAT_ROW_URL}" class="collageSubcategories-item">
        <img src="themes/itbirja/images/collage/480x330/{CAT_ROW_CODE}.jpg" alt="{CAT_ROW_TITLE}">
        </a>
      </div>
      <!-- END: CATS_ROW -->
    </div>
  </div>

  <!-- BEGIN: POPULAR_CATS_ROW -->
  <div class="lg-centerwrap centerwrap main-wrap m-m0 authorized-prd-block clearfix categoriesSlider">
    <h1 align="center" class="m-text-left m-f18">{PCAT_ROW_TITLE}</h1>
    <div class="prd-carousel">
      <div class="js-prd-carousel-container-popularDodjis prd-carousel__container">
        <!-- BEGIN: PRD_ROWS -->
        <div class="cusongsblock js-prd-card" data-id="{PRD_ROW_ID}">
          <div class="songperson cusongsblock__content">
            <a href="{PRD_ROW_URL}">
            <img src="{PRD_ROW_PHOTO_FIRST_CROP}" alt="{PRD_ROW_SHORTTITLE}" width="230" height="153">
            </a>
          </div>
          <div class="ta-left padding-content">
            <span class="userimage m-hidden">
              <i class="icon ico-{PRD_ROW_OWNER_ONLINEICO}"></i>
              <img src="<!-- IF {PRD_ROW_OWNER_AVATAR_SRC} -->{PRD_ROW_OWNER_AVATAR_SRC}<!-- ELSE -->themes/itbirja/files/avatar/medium/noprofilepicture.gif<!-- ENDIF -->" class="rounded" alt="{PHP.usr.name}" />
            </span>
            <div class="pull-left cusongsblock-panel__user-name m-hidden oneline-faded w120">
              <a class="dark-link" href="{PRD_ROW_OWNER_DETAILSLINK}" title="{PRD_ROW_OWNER_NICKNAME}">{PRD_ROW_OWNER_NICKNAME}</a>
              <span>
                <!-- IF {PRD_ROW_OWNER_MAINGRPID} == 7 -->
                  {PRD_ROW_OWNER_MK_PAYER_GROUP}
                <!-- ELSE -->
                  {PRD_ROW_OWNER_MK_SELLER_GROUP}
                <!-- ENDIF -->
              </span>
            </div>
            <div class="cusongsblock-toprated m-hidden">
              <!-- IF {PRD_ROW_MK_POPULAR} -->
              <div class="toprated-inner-white">
                <span class="white-shadow">&nbsp;&nbsp;</span>
                <span class="fox-express">{PHP.cfg.market.item_profi_title}</span>
              </div>
              <!-- ENDIF -->
            </div>
            <div class="clear"></div>
            <p class="multiline-faded-block">
              <a class="multiline-faded" href="{PRD_ROW_URL}" title="{PRD_ROW_SHORTTITLE}">
                <span class="first-letter dib">{PRD_ROW_SHORTTITLE}</span>
              </a>
            </p>
            <div class="cusongsblock__panel">
              <div class="pull-right cusongsblock-panel__rating m-pull-reset">
                <!-- IF {PRD_ROW_RSTAR} > 0 -->
                <ul class="rating-block cusongsblock-panel__rating-list dib">
                  <li class="mr2 v-align-m">
                    <i class="fa fa-star gold" aria-hidden="true"></i>
                  </li>
                  <li class="rating-block__rating-item--number fw600 v-align-m">{PRD_ROW_RSTAR}</li>
                </ul>
                <!-- ENDIF -->
                <span class="rating-block__count">({PRD_ROW_COUNT})</span>
              </div>
              <div class="clear"></div>
            </div>
            <div class="userdata clearfix">
              <div class="cusongsblock__labels m-visible">
                <!-- IF {PRD_ROW_MK_POPULAR} -->
                <div class="cusongsblock__label-container">
                  <a href="{PRD_ROW_URL}">
                  <span class="fox-express">{PHP.cfg.market.item_profi_title}</span>
                  </a>
                </div>
                <!-- ENDIF -->
              </div>
              <div class="otherdetails pull-left m-hidden" style="">
                <div data-bookmark="{PRD_ROW_ID}"<!-- IF {PRD_ROW_ISFAV} --> class="active"<!-- ENDIF -->>
                  <div class="tooltipster Favorites-block pull-left" data-tooltip-side="top" data-tooltip-text="Добавить в избранное"><i class="icon ico-heart ico-heart_hover icon ico-heart_no-active"></i></div>
                  <div class="tooltipster Favorites-block pull-left hidden" data-tooltip-side="top" data-tooltip-text="Удалить из избранного"><i class="icon ico-heart ico-heart_hover"></i></div>
                </div>

                <div class="user_prd_mark_block pull-left ml5">
                  <!-- IF {PRD_ROW_MK_ISORDERYET} -->
                    <span class="tooltipster dib tooltipstered" data-tooltip-side="top" data-tooltip-text="{PRD_ROW_MK_ISORDERYET}"><img src="themes/itbirja/images/cart-{PRD_ROW_MK_ISORDERYET_ICON}.png" width="20" height="16" alt=""></span>
                  <!-- ELSE -->
                    <!-- IF {PRD_ROW_VIZITED} -->
                      <span class="tooltipster dib" data-tooltip-side="top" data-tooltip-text="Ранее вы просматривали {PHP|cot_sitename('phrases', 'ety')}">
                       <img src="themes/itbirja/images/ok-mark-grey.png" width="20" height="16" alt="">
                      </span>
                    <!-- ENDIF -->
                  <!-- ENDIF -->
                </div>
                <div class="rating-block__count tooltipster dib tooltipstered" data-tooltip-side="top" data-tooltip-text="Кол-во просмотров">({PRD_ROW_COUNT})</div>
                <div class="clear"></div>
              </div>
              <div class="price pull-right m-pull-right"> {PRD_ROW_COST_OT} {PRD_ROW_COST_FORMAT}</div>
              <div class="otherdetails pull-right m-visible">
                <div class="user_prd_mark_block">
                  <!-- IF {PRD_ROW_MK_ISORDERYET} -->
                  <span class="tooltipster dib tooltipstered" data-tooltip-side="right" data-tooltip-text="{PRD_ROW_MK_ISORDERYET}" data-proportion="3:2"><img src="themes/itbirja/images/cart-{PRD_ROW_MK_ISORDERYET_ICON}.png" width="20" height="16" alt=""></span>
                  <!-- ELSE -->
                    <!-- IF {PRD_ROW_VIZITED} -->
                    <span class="tooltipster dib" data-tooltip-side="right" data-tooltip-text="Ранее вы просматривали {PHP|cot_sitename('phrases', 'ety')}" data-proportion="3:2">
                      <img src="themes/itbirja/images/ok-mark-grey.png" width="20" height="16" alt="">
                    </span>
                    <!-- ENDIF -->
                  <!-- ENDIF -->
                </div>
              </div>
              <div class="pull-left cusongsblock-panel__user-name m-visible"><i class="icon ico-{PRD_ROW_OWNER_ONLINEICO} v-align-m"></i>&nbsp;<a class="dark-link dib v-align-m oneline-faded w100" href="{PRD_ROW_OWNER_DETAILSLINK}" title="{PRD_ROW_OWNER_NICKNAME}">{PRD_ROW_OWNER_NICKNAME}</a></div>
            </div>
          </div>
        </div>
        <!-- END: PRD_ROWS -->
      </div>
    </div>
    <div class="pull-center semibold fs16"><a href="{PCAT_ROW_URL}"><center>Посмотреть больше</center></a></div>
  </div>
  <!-- END: POPULAR_CATS_ROW -->
  <style>
    .prd-carousel {
      min-height: 313px;
    }
  </style>
  <script>
    var sccls = '',
        sclen = $('#subcategoriesRow > div').length;

    if(sclen >= 4) {
      if(sclen == 5) {
        sccls = 'firstSubcategories-5';
      } else if(sclen == 10) {
        sccls = 'firstSubcategories-5 lastSubcategories-5';
      } else if((sclen % 4) == 0) {
        sccls = 'firstSubcategories-4';
      } else if((sclen % 4) == 1) {
        sccls = 'lastSubcategories-5';
      } else if((sclen % 4) == 2) {
        sccls = 'firstSubcategories-2';
      } else if((sclen % 4) == 3) {
        sccls = 'firstSubcategories-3';
      }
    } else {
      sccls = 'firstSubcategories-' + sclen;
    }
    if(sccls != '') $('#subcategoriesRow').addClass(sccls);


    $(document).ready(function() {
    	prd_carousel_index_popularDodjis();
    });

    function prd_carousel_index_popularDodjis() {
    	$('.js-prd-carousel-container-popularDodjis').prdCarousel({
    		margin: 0,
    		staticFirst: true,
    		items: 9999999,
    		responsive: {
    			768: {
    				items: 4
    			},
    			1231: {
    				items: 5
    			}
    		}
    	});
    }
  </script>
  <br><br>
</div>

<!-- END: MAIN -->