{% extends "base.html" %} {% load static %} {% block content %}
<section class="container" id="root">
    <div class="columns">

        <div class="column is-10 is-offset-1">
            <div class="hero project-image">
                <div class="hero-body">
                    <div class="container">
                        <h1 class="title has-text-white">
                            Hello, {{ user.get_username | title }}.
                        </h1>
                        <h2 class="subtitle has-text-white">
                            I hope you are having a great day!
                        </h2>
                        <a class="button is-primary">Create Project</a>
                    </div>
                </div>
            </div>
            <div class="box content">
                <article class="post">
                    <h4>My Projects</h4>
                    <div class="media">
                        <div class="media-content">
                            <div class="content">
                                <table class="table is-hoverable">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Project name</th>
                                            <th>Priority</th>
                                            <th>Progress</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for project in object_list %}
                                        <tr>
                                            <th style="vertical-align:middle;">{{ forloop.counter }}</th>
                                            <td>
                                                <a href="{% url 'annotation' project.id %}">{{ project.name }}</a>
                                                <p>{{ project.description|truncatechars:50 }}</p>
                                            </td>
                                            <td style="vertical-align:middle;"><span class="tag is-danger">High</span></td>
                                            <td style="vertical-align:middle;"><progress class="progress is-primary" value="70" max="100">30%</progress></td>
                                            <td style="vertical-align:middle;">
                                                <a class="button is-link is-small" href="{% url 'project-admin' project.id %}">
                                                        <i class="fas fa-cog"></i>&nbsp;Settings
                                                </a>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
{% endblock %}