<!DOCTYPE html>
<html>
<head>
<title>{{ file.name }}</title>
{% include "stylesheet.html" %}
<link rel="stylesheet" href="/pygments.css">
<style>
</style>
</head>
<body>
<h1>HTMLify</h1>
{% include "search-bar.html" %}
{% include "nav-bar.html" %}
<div class="file-container">
<div class="file-header">
<div class="file-title" style="overflow:auto;">{{ file.name }}</div>
<div class="file-info">
Views: {{ file.views }} <!-- imlement sooon | Stars: 50 -->| Author: <a href="/{{ file.owner }}" style="text-decoration: none;color: black;">{{ file.owner }}</a>
</div>
</div>
<div class="file-content">{% if file.type == "text" %}{{ file.highlighted() | safe }}</div>
{% elif file.type == "image" %}<img src="/raw/{{ file.path }}" style="height:auto;width:100%;"></div>
{% elif file.type == "video" %}<video width="100%" style="height:auto;width:100%;" controls><source src="/raw/{{ file.path }}"></video></div>
{% elif file.type == "document" %}<iframe src="/raw/{{ file.path }}" width="100%"></iframe></div>
{% else %}<a href="/raw/{{ file.path }}" class="download-button" download>Download File<span class="file-size">({{ file.sizef() }})</span></a></div>
{% endif %}
<div class="link-copy-box">
<h3>Share this file:</h3>
<input type="text" id="fileLink" value="{{ request.url }}" readonly>
<button onclick="copycontent('fileLink')">Copy</button><br><br>
<a href="/raw/{{ file.path }}"><button>View Raw</button></a>
<a href="/raw/{{ file.path }}" download><button>Download File<span class="file-size">({{ file.sizef() }})</span></button></a>
<button id="embedcodebutton" onclick="embedcode()">Embed Code</button>
<form method="POST" action="/edit" style="display:inline-block;">
<input type="hidden" name="clone" value="{{ file.id }}"/>
<button>Clone</button>
</form>
</div>
<h3>Comments</h3>
{% for comment in file.comments %}
<div class="comment-card" id="comment-{{ comment.id }}">
<div class="comment-header">
<span class="comment-author"><img src="/media/dp/{{ comment.author }}.jpg"><a href="/{{ comment.author }}">{{ comment.author }}</a></span>
<span class="comment-time">{{ comment.time.strftime("%Y-%m-%d %H:%M") }}</span>
</div>
<hr>
<div class="comment-content">
{{ comment.content | safe }}
</div>
<div class="comment-actions">
<a href="#comment-text-field" onclick="add_mention('{{ comment.author }}')">Reply(Mention)</a>
<!--<a href="#">Like</a>-->
</div>
</div>
{% endfor %}
<div class="comment-section">
<form action="/action/comment" method="POST">
<input name="file-id" type="hidden" value="{{ file.id }}" />
<textarea id="comment-text-field" name="content" placeholder="Leave a comment...
use <b>, <i>, <u> etc to format comment
use '@' for mention users." maxlength="1024" required></textarea>
<input type="hidden" name="token" value="{{ token }}">
<button>Comment</button>
</form>
</div>
</div>
<script>
function copycontent(id) {
var fileLinkInput = document.getElementById(id);
fileLinkInput.select();
document.execCommand("copy");
alert("Copied to clipboard!");
}
function embedcode() {
document.getElementById("embedcodebutton").outerHTML = `<input type="text" id="embedcode" value="<iframe src='{{ request.scheme }}://{{ request.host }}/api/embed?id={{ file.id }}'></iframe>" readonly><button onclick="copycontent('embedcode')">Copy</button>`;
}
function add_mention(username){
var comment_field = document.getElementById("comment-text-field");
comment_field.value = "@"+username + " " + comment_field.value;
}
</script>
</body>
</html>