embeded pandora mobile view

app/templates/:u

@@ -0,0 +1,77 @@
+{% 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 %}