{% extends 'base.html' %}
{% block head %}
    <script>
        $(document).ready(function(){
            $(".add-annotation").click(function(){
                $(".annotation").toggle();
            });
            $(".show-detail").click(function(){
                $(".detail").toggle();
            });
        });
    </script>
{% endblock %}

{% block main %}
<div class="container">
    <div class="row">
        <div class="span12">            
            <table class="table table-striped">
                <tr>
                    <td><strong>Filename<strong></td>
                    <td>{{ file.meta.filename }}</td>
                </tr>
                <tr>
                    <td><strong>Filesize<strong></td>
                    <td>{{ file.meta.filesize }}</td>
                </tr>
                <tr>
                    <td><strong>Filetype<strong></td>
                    <td>{{ file.meta.filetype }}</td>
                </tr>
            </table>
            <a class="show-detail btn" href="#">Toggle detailed view</a>
            <a class="btn" href="/download/{{ file.uuid }}/"><i class="icon-download-alt"></i> Download</a>
            <a class="btn add-annotation" href="#"><i class="icon-edit"></i> Annotate</a>
            <br><br>
            <div class="annotation hide well">
                <form action="/annotate/{{ file.uuid }}" method="post">
                <label class="checkbox">
                    <label class="radio">
                          <input type="radio" name="type"
                          id="form_comment" value="comment" checked>Comment
                    </label>
                    <label class="radio">
                        <input type="radio" name="type"
                        id="form_tag" value="tag">Tag
                    </label>
                </label>
                    <textarea class="span6" rows="3" name="value", id="value"></textarea>
                    <br>
                    <input type="submit" value="Save"> 
                </form>
            </div>
            <div class="detail hide">
                <table class="table table-bordered">
                    <tr>
                        <td><strong>md5<strong></td>
                        <td>{{ file.meta.hash.md5 }}</td>
                    </tr>
                        <tr>
                        <td><strong>sha1</strong></td>
                        <td>{{ file.meta.hash.sha1 }}</td>
                    </tr>
                    <tr>
                        <td><strong>sha256</strong></td>
                        <td>{{ file.meta.hash.sha256 }}</td>
                    </tr>
                    <tr>
                        <td><strong>sha512</strong></td>
                        <td>{{ file.meta.hash.sha512|truncate(80, True) }}</td>
                    </tr>
                    <tr>
                        <td><strong>ssdeep</strong></td>
                        <td>{{ file.meta.hash.ssdeep }}</td>
                    </tr>
                </table>
            </div>
            <ul class="nav nav-tabs">
                {% for type in file.annotations %}
                    {% if loop.index == 1 %}
                        <li class="active">
                    {% else %}
                        <li>
                    {% endif %}
                        <a href="#{{ type }}" class="tablink"
                            data-toggle="tab">{{ type }}</a>
                    </li>
                    {% endfor %}
                    {% if b64img %}
                        <li>
                            <a href="#preview" class="tablink"
                            data-toggle="tab">preview</a>
                        </li>
                    {% endif %}

                </ul>
            <div class="tab-content">
                {% for type, annotation in file.annotations.items() %}
                    {% if loop.index == 1 %}
                        <div class="tab-pane active" id="{{ type }}">
                    {% else %}
                        <div class="tab-pane" id="{{ type }}">
                    {% endif %}
                    {% for item in annotation %}
                        {% if type == "comment" %}
                            {% if item.created %}
                                {{ item.created|datetimeformat }}
                            {% endif %}
                            <br>
                            {{ item.annotation }}
                            <br><br>
                        {% elif type == "tag" %}  
                            <span class="label label-info">{{ item.annotation }}</span>
                        {% else %}        
                            {% include "plugins/%s.html" % type ignore missing %}
                        {% endif %}
                    {% endfor %}
                    </div>
                {% endfor %}
                {% if b64img %}
                    <div class="tab-pane" id="preview">
                        <img src="data:image/png;base64,{{ b64img }}">
                        <br><br>
                    </div>
                {% endif %}                    
            </div>
        </div>
    </div>
{% endblock %}
