{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="css/reset.css"></link>
<link rel="stylesheet" href="css/style.css"></link>
{% endblock %}
{% block content %}
    <style>
        body {
            margin: 0;
            padding: 0;
            background: turquoise;
        }
        .add-comment {
            width: 100%;
            height: 30vh;
            text-align: center;
        }
        .add-comment input {
            width: 100px;
        }
        .add-comment textarea {
            width: 80vw;
            display: block;
            background: black;
            color: white;
            margin: auto;
            padding: 0;
            border: 0;
        }
        .add-comment button {
            background: red;
            border: 0;
        }

        .comment .text {
            white-space: pre-line;
        }

    </style>

    <div class="item">
        <iframe src="{{ item.url }}" frameborder="0" allowfullscreen style="border:0;padding:0;margin:0;width:100%;height:100vh"></iframe>
    </div>
    <div class="comments">
    {% for comment in item.public_comments %}
        <div class="comment">
            <div class="name">{{ comment.name }}</div>
            <div class="date">{{ comment.date }}</div>
            <div class="text">{{ comment.text }}</div>
        </div>
    {% endfor %}
    </div>
    <div class="add-comment">
        {% if request.user.is_anonymous %}
        <input name="name" type="text" placeholder="your name"></input>
        <input name="email" type="email" placeholder="your email"></input>
        <br>
        {% endif %}
        {% csrf_token %}
        <textarea name="text" placeholder="your comment"></textarea>
        <button id="add-comment">Add comment</button>
    </div>
{% endblock %}
{% block end %}
<script src="/static/js/utils./static/js"></script>
<script src="/static/js/api./static/js"></script>
<script src="/static/js/icons./static/js"></script>
<script src="/static/js/VideoElement./static/js"></script>
<script src="/static/js/VideoPlayer./static/js"></script>
<script src="/static/js/documents./static/js"></script>
<script src="/static/js/edits./static/js"></script>
<script src="/static/js/item./static/js"></script>
<script src="/static/js/render./static/js"></script>
<script src="/static/js/main./static/js"></script>

<script src="/static/js/comments./static/js"></script>
{% endblock %}