/templates/item.html

{% extends '__base.html' %}

{% block container %}
<div class="video-substrate">
    <div class="container">
        <div class="row">
            <div class="span16">
                {% block player %}
                    {% include '__player.html' %}
                {% endblock %}
            </div>
        </div>
        <div class="row">
            <div class="span10">
                <h3>
                    Арестованы подозреваемые в похищении трех женщин в Огайо

                    <a href="#" class="item-menu-toggle"  href="#item-popover"
                                                   data-toggle="modal"
                                                   data-target="#item-popover"
                                                   data-placement="bottom">
                        <span class="caret"></span>
                    </a>
                    <div class="popover bottom hide fade item-popover" id="item-popover">
                        <div class="arrow" style="margin-left: -5px"></div>
                        <div class="popover-content">
                            <ul class="no-bullet no-margin fz13">
                                <li><a href="#"><i class="icon-edit"></i> Edit description</a></li>
                                <li><a href="#"><i class="icon-remove"></i> Delete</a></li>
                            </ul>
                        </div>
                    </div>
                    <small>
                        Participants: <a class="bold grayLight" href="#">AiRKiL</a>, <a class="bold grayLight" href="#">SesameStreet</a>, <a class="bold grayLight" href="#">Tanya1976ism</a>, <a class="bold grayLight" href="#">maradiaga121210</a>
                    </small>
                </h3>

                <div class="pull-left mr10">
                    <img src="holder.js/48x48" class="avatar">
                </div>
                <div class="mb15">
                    <a href="/profile/" class="fz13 bold">alexander tobin</a>
                    <a href="/channel/" class="grayLight fz13 bold td-none mr10">
                        / <span class="sprites-icon-channel"></span> MrNuraT
                    </a>
                        <!--
                            Типы дивов для других статусов прав
                            <span class="icon-user grayLight"></span>
                            <span class="icon-group grayLight"></span>
                            <span class="icon-lock grayLight"></span>
                            <span class="icon-gear grayLight"></span>
                        -->
                        <span class="sprites-icon-globe"></span>

                    <br>

                    <div class="btn-group subscribe mt5">
                        <button class="btn lefted btn-mini"><i class="sprites-icon-plus-white"></i></button>
                        <button class="btn btn-mini">Subscribe</button>
                    </div>
                    <div class="popover bottom" id="subscribe-content">
                        <div class="arrow" style="margin-left: -50px"></div>
                        <div class="popover-content">
                            <ul class="no-bullet fz11 no-margin">
                                <li class="mb5">
                                    <a class="gray bold" href="#">
                                        <i class="sprites-icon-user-micro grayLight"></i>&nbsp; Autor
                                    </a>
                                </li>
                                <li>
                                    <a class="gray bold" href="#">
                                        <i class="sprites-icon-channel grayLight"></i>&nbsp; Channel
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <br class="clear clearfix">
                </div>
                <div class="item-description fz12 ml60">
                    <div class="item-description__inner">
                        Российское правительство решило отправить гендиректора «Почты России» Александра Киселева в отставку. Об этом сообщает РИА Новости со ссылкой на источник в кабинете министров. ИТАР-ТАСС подтверждает эту информацию со ссылкой на представителя пресс-службы предприяУтия Андрея Монакова.
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="actions mt10">
                    <span class="grayLight fz12 mr10"><span class="sprites-icon-time"></span> 24 апреля, в 16:42</span>
                    <span class="grayLight fz12 bold mr10"><span class="sprites-icon-viewed"></span> 56</span>
                    <a href="#" class="grayLight bold fz12 mr10"><span class="sprites-icon-stats"></span> Stats</a>
                    <a href="#" class="sprites-icon-flag"></a>

                    <hr>

                    <div class="mb0">
                        <a class="btn btn-noshadow grayLight">
                            <i class="sprites-icon-heart"></i> 12
                        </a>
                        <a class="btn btn-noshadow grayLight mr10">
                            <i class="sprites-icon-share"></i> Share <span class="normal">(56)</span>
                        </a>
                        <a href="#" class="grayLight bold fz12 mr10">
                           <i class="sprites-icon-star"></i> To favorite
                        </a>
                        <a href="#" class="grayLight bold fz12">
                           <i class="sprites-icon-hourglass"></i> Must see
                        </a>
                    </div>
                    <br>
                    <span class="fz12 grayLight">
                        Share to social
                        <div class="btn-group btn-group-social ml5">
                            <button class="btn"><i class="sprites-icon-social-vk"></i></button>
                            <button class="btn"><i class="sprites-icon-social-facebook"></i></button>
                            <button class="btn"><i class="sprites-icon-social-twitter"></i></button>
                        </div>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="span9">
            <h4>Сomments</h4>

            <div class="comment-form mb15">
                <form class="" action="#">
                    <div class="me-avatar">
                        <img src="holder.js/48x48" class="avatar">
                    </div>
                    <div class="textarea">
                        <textarea id="comment-textarea" col="" row="" placeholder="Leave your comment here"></textarea>

                        <div class="actions" style="display: none;">
                            <button type="" class="btn btn-mind">Отправить</button>
                            <span class="mt5 grayLight fz11">Ctrl+Enter для отправки</span>
                        </div>
                    </div>
                </form>
            </div>

            <div class="comment-item mb15">
                <a href="#" class="avatar no-border">
                    <img src="/static/img/anonymous.png" class="avatar no-border" >
                </a>
                <div class="comment-item__body">
                    <div class="head">
                        <a href="#" class="fz13 bold mr10">alexander tobin</a>
                        <span class="fz11 grayLight">20 минут назад</span>
                    </div>
                    <div class="fz13 gray">
                        вы его никак не могли досмотреть, т.к. 22 серия ещё не вышла, а она будет последней
                    </div>
                    <a href="#" class="fz11">Answer</a>
                </div>
            </div>

            <div class="comment-item mb15">
                <a href="#" class="avatar">
                    <img src="holder.js/48x48" class="" >
                </a>
                <div class="comment-item__body">
                    <div class="head">
                        <a href="#" class="fz13 bold mr10">alexander tobin</a>
                        <span class="fz11 grayLight">20 минут назад</span>
                    </div>
                    <div class="fz13 gray">
                        Ну что было .14 серий.
                    </div>
                    <a href="#" class="fz11">Answer</a>
                </div>
            </div>

            <div class="comment-item mb15">
                <a href="#" class="avatar no-border">
                    <img src="/static/img/anonymous.png" class="avatar no-border" >
                </a>
                <div class="comment-item__body">
                    <div class="head">
                        <a href="#" class="fz13 bold mr10">alexander tobin</a>
                        <span class="fz11 grayLight">20 минут назад</span>
                    </div>
                    <div class="fz13 gray">
                        Евгений, мы смотрим на дисках а они так сказать выходят очень поооздно.
                    </div>
                    <a href="#" class="fz11">Answer</a>
                </div>
            </div>

            <div class="comment-item mb15">
                <a href="#" class="avatar no-border">
                    <img src="/static/img/anonymous.png" class="avatar no-border" >
                </a>
                <div class="comment-item__body">
                    <div class="head">
                        <a href="#" class="fz13 bold mr10">alexander tobin</a>
                        <span class="fz11 grayLight">20 минут назад</span>
                    </div>
                    <div class="fz13 gray">
                        Елена, вы через модем сидите?
                    </div>
                    <a href="#" class="fz11">Answer</a>
                </div>
            </div>

        </div>
        <div class="span6 offset1">
            <div class="related-video">
                <h4>Relation movies</h4>
                <div class="video-item mb20">
                    <div class="row-fluid">
                        <div class="span7">
                            <div class="video-item-image">
                                <span class="timer">12:05</span>
                                <a href="#"><img src="holder.js/180x100" alt=""></a>
                            </div>
                        </div>
                        <div class="span9">
                            <div class="mb5">
                                <a href="#" class="bold">
                                    Опыт с мгновенным замерзанием кипятка на морозе
                                </a>
                            </div>
                            <div class="lh-small">
                                <a href="#" class="fz11 grayLight">
                                    <span class="sprites-icon-user-micro"></span> AiRKiLLakaVaD
                                </a>
                                <br>
                                <span class="fz11 grayLight">Views 1255</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="video-item mb20">
                    <div class="row-fluid">
                        <div class="span7">
                            <div class="video-item-image">
                                <span class="timer">1 54:21</span>
                                <a href="#"><img src="holder.js/180x100" alt=""></a>
                            </div>
                        </div>
                        <div class="span9">
                            <div class="mb5">
                                <a href="#" class="bold">
                                    Untitled movie
                                </a>
                            </div>
                            <div class="lh-small">
                                <a href="#" class="fz11 grayLight">
                                    <span class="sprites-icon-user-micro"></span> Asmadek
                                </a>
                                <br>
                                <span class="fz11 grayLight">Views 1255</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="video-item mb20">
                    <div class="row-fluid">
                        <div class="span7">
                            <div class="video-item-image">
                                <span class="timer">12:05</span>
                                <a href="#"><img src="holder.js/180x100" alt=""></a>
                            </div>
                        </div>
                        <div class="span9">
                            <div class="mb5">
                                <a href="#" class="bold">
                                    Как делать огромные мыльные пузыри
                                </a>
                            </div>
                            <div class="lh-small">
                                <a href="#" class="fz11 grayLight">
                                    <span class="sprites-icon-user-micro"></span> AiRKiLLakaVaD
                                </a>
                                <br>
                                <span class="fz11 grayLight">Views 1255</span>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
{% endblock %}