{% extends "base.html" %}

{% block title %}{{block.super}} > {{datasheet.title}}{% endblock %}

{% block css_import %}
{{block.super}}
        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}hdalab/css/notice.css" />
{% endblock %}

{% block js_import %}
{{block.super}}
        <script src="{{STATIC_URL}}hdalab/lib/underscore-min.js"></script>
        <script src="{{STATIC_URL}}hdalab/js/notice.js"></script>
{% endblock %}

{% block main_content %}
<div class="main-datasheet">
    <h2>{{datasheet.title}}</h2>
    <h3><a href="{{datasheet.organisation.website}}" target="_blank">{{datasheet.organisation.name}}</a></h3>
    <img src="http://histoiredesarts.culture.fr/images/cached/images/{{datasheet.hda_id}}.jpg" />
    <p>{{datasheet.description}}</p>
    <ul>
        <li>Visiter sur <a href="{{datasheet.url}}" target="_blank">{{domain}}</a></li>
        <li>Plus d'informations sur <a href="http://histoiredesarts.culture.fr/notices/{{datasheet.hda_id}}/" target="_blank">histoiredesarts.culture.fr</a></li>
    </ul>
</div>

<div class="tag-container">
    <canvas class="tag-canvas"></canvas>
    <div class="tags-main">
        <h2>Mots-clés</h2>
        <ul class="tags">
        {% for t in ordered_tags %}
            <li><span class="main-datasheet-tag" data-tag-id="{{t.tag.id}}">{{t.tag.label}}</span></li>
        {% endfor %}
        </ul>
    </div>
</div>

<div class="related-datasheets">
    <h2>Notices liées :</h2>
    <ul class="datasheets">
    {% for ds in related %}
        <li class="datasheet">
            <img src="http://histoiredesarts.culture.fr/images/cached/images/{{ds.hda_id}}.jpg" />
            <h3><a href="{% url notice ds.hda_id %}">{{ds.title}}</a></h3>
            <h4>{{ds.organisation_name}}</h4>
            <ul class="datasheet-tags">{% for t in ds.ordered_tags %}<li data-tag-id="{{t.id}}" class="related-datasheet-tag {% if t.common %} common-tag{% endif %}">{{t.label}}</li>{% endfor %}</ul>
        </li>
    {% endfor %}
    </ul>
</div>
    
{% endblock %}