{% extends "base.html" %}

{% block main %}
<div id="home_content">
<h1 class="header" id="title_xppl">XPPL</h1>
<p class="lead"> Welcome to our digital library. <br>
On instance: {{server}} / From: {{client}}
<br>
Feel free to browse our catalogue, interfaced in many different ways.
</p>

<div id = "interface_links">
<!--<a href="{{url_for('show_books_grid')}}">Grid</a>-->
<a href="{{url_for('show_books')}}">List</a>
<a href="{{url_for('volumetric_catalog')}}">Volumetric</a>
<a href="{{url_for('scape')}}">Scape</a>
</div>
<br><br><br>

{%if light%}
{%else%}
<form method="GET" action="/export/csv">
   <button type="submit">Export Catalogue (.CSV)</button>
</form>
<form method="POST" action="/import/csv" id="form_import_csv" enctype=multipart/form-data>
  <input type="file" id="file_import_csv" name=file style="display:none;" />
   <button type = "button" onclick="document.getElementById('file_import_csv').click()">Import Catalogue (.CSV)</button>
</form>
</div>
{%endif%}
{{ chat.message }}

<div id="app" class="container">
  <div class="messageback1"></div>
  <div class="messageback2"></div>
    <section class="messages">

        <div v-for="message in messages" class="box">
            <article class="media">
                <div class="media-content">
                    <div class="content">
                        <p class="user">[[ message.username ]]</p>
                        <p class="time">[[ message.time ]]</p>
                        <p class="msg">[[ message.text ]]</p>
                    </div>
                </div>
            </article>
        </div>

    </section>
    <section class="new-message">
        <div class="field has-addons">
            <div class="control is-expanded">
                <input v-model="newMessage" @keypress.enter="sendMessage" class="input" type="text" placeholder="Enter message">
            </div>
            <div class="control">
                <button @click="sendMessage" class="button is-info">Send</button>
            </div>
        </div>
    </section>
  </div>

{% endblock %}