## mako
<%!
from django.utils.translation import ugettext as _
from django.utils.formats import date_format
%>

<%inherit file="/funsite/parts/base-fixed-width.html" />

<%namespace name="breadcrumbs" file="/funsite/parts/breadcrumbs.html"/>


<%block name="meta_extra">
    <meta property="og:site_name" content="FUN-MOOC"/>
    <meta property="og:url" content="//www.fun-mooc.fr${article.get_absolute_url()}" />
    <meta property="og:title" content="${article.title}" />
    <meta property="og:description" content="${article.get_lead_paragraph()}" />
    <meta property="og:locale" content="${article.language}" />
    <meta property="og:image" content="//www.fun-mooc.fr/media/${article.get_thumbnail('facebook')}" />

</%block>

<%block name="title">${article.title}</%block>

<%block name="content">

<div class="news-detail main-content compensate-right-column">

    <div class="row">
        <div class="col-lg-21 col-sm-26 no-gutter-right">
            <div class="left">
                ${breadcrumbs.breadcrumbs(article.title)}

                <div class="header">

                    <div class="text-center">
                        <h1 class="big-title color-regal-blue">${article.title}</h1>
                    </div>
                    <div class="line text-center">
                        <span></span>
                    </div>
                    % if article.category:
                      <div class="category color-denim-blue text-center">
                          ${article.category}
                      </div>
                    % endif

                    <div class="author">
                        ${date_format(article.created_at, 'DATE_FORMAT')}
                    </div>
                    <img src="/media/${article.get_thumbnail('very-big')}" class="img-responsive">
                </div>

                <div class="lead-paragraph">
                    ${article.get_lead_paragraph()}
                </div>

                <div class="description">
                    ${article.text}
                </div>
            </div>
        </div>

        <div class="col-lg-15 col-sm-10 no-gutter-left no-padding">
            <div class="right">


                <div class="blue-zone">
                    <div class="row">
                        <div class="col-sm-36 social-networks">
                            <a href="${facebook_action}" target="_blank">
                                <span class="facebook"></span>
                            </a>
                            <a href="${twitter_action}" target="_blank">
                                <span class="twitter"></span>
                            </a>
                            <a href="${email_subject}" target="_blank">
                                <span class="email"></span>
                            </a>
                        </div>
                        <div class="col-xxs-36 col-xs-18 col-sm-36 col-lg-18">
                            % if article.event_date:
                            <div class="course-info calendar">
                                <ul>
                                <li>
                                    <strong>${_("Event date")}</strong>
                                </li>
                                <li>
                                    ${date_format(article.event_date, 'DATE_FORMAT')}
                                </li>
                                </ul>
                            </div>
                            % endif

                            % if article_courses:
                            <div class="course-info diploma">
                                <ul>
                                <li>
                                    <strong>${_("Courses")}</strong>
                                </li>
                                % for course in article_courses:
                                <li>
                                     <a href="${course.get_absolute_url()}">${course.title}</a>
                                </li>
                                % endfor
                                </ul>
                            </div>
                            % endif


                            % if article_links:
                            <div class="course-info link">
                                <ul>
                                <li>
                                    <strong>${_("Usefull links")}</strong>
                                </li>
                                % for link in article_links:
                                <li>
                                     <a href="${link.url}" target="_blank">${link.name}</a>
                                </li>
                                % endfor
                                </ul>
                            </div>
                            % endif

                            % if category_articles:
                            <div class="course-info folder">
                                <ul>
                                <li>
                                    <strong>${_("In the same category")}</strong>
                                </li>
                                % for news in category_articles:
                                <li>
                                     <a href="${news.get_absolute_url()}">${news.title}</a>
                                </li>
                                % endfor
                                </ul>
                            </div>
                            % endif
                        </div>
                        <div class="col-xxs-36 col-xs-18 col-sm-36 col-lg-18">

                            <div class="course-info star">
                                <ul>
                                    <li>
                                        <strong>${_("Featured news")}</strong>
                                    </li>
                                    % for news in featured_news:
                                    <li>
                                        <a href="${news.get_absolute_url()}">${news.title}</a>
                                    </li>
                                    % endfor
                                </ul>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
</%block>