{% extends 'allianceauth/base.html' %}
{% load humanize %}
{% load evelinks %}

{% block page_title %}Entry Details{% endblock page_title %}

{% block extra_css %}
    <style>
        .fa-heart-red {
            transform: scale(2, 2);
            
            color: #E4115C;
        }

        td, th {
            text-align: center;
        }
    </style>
{% endblock extra_css %}

{% block content %}
    <div class="col-lg-12">
        <h1 class="page-header text-center">{{ entry.rotation.name }}</h1>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title text-center">Entry</h3>
            </div>
            <div class="panel-body">
                <div class="flex-center-horizontal">
                    <ul class="list-group list-group-horizontal" style="margin-bottom: 0;">
                        <li class="list-group-item text-center"><p>{{ entry.created_at|date:"d/m/Y G:i e" }}</p></li>
                        <li class="list-group-item text-center"><p>Users</p><p>{{ entry.total_user_count }}</p></li>
                        <li class="list-group-item text-center"><p>Total After Tax</p><p>{{ entry.estimated_total_after_tax|floatformat|intcomma }}</p></li>
                        <li class="list-group-item text-center"><p>Total</p><p>{{ entry.estimated_total|intcomma }}</p></li>
                        <li class="list-group-item text-center">
                            <p>Created By</p>
                            <div style="display: flex; text-align: right;">
                                <img src="{{ entry.created_by.profile.main_character|character_portrait_url:32 }}" class="img-circle" style="margin-right: 1rem;">
                                <p>{{ entry.created_by.profile.main_character.character_name }}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title text-center">Fleet Roles</h3>
            </div>
            <div class="panel-body">
                <table class="table table-aa">
                    <thead>
                        <th scope="row">Role</th>
                        <th scope="row">Value</th>
                        <th scope="row">Approximate Percentage</th>
                    </thead>
                    <tbody>
                        {% for role in entry.roles.all %}
                            <tr>
                                <td>{{ role.name }}</td>
                                <td>{{ role.value }}</td>
                                <td>{{ role.approximate_percentage|floatformat }}%</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title text-center">Shares</h3>
            </div>
            <div class="panel-body">
                <table class="table table-aa">
                    <thead>
                        <tr>
                            <th style="text-align: left;">User's Main Character</th>
                            <th style="text-align: left;">Character</th>
                            <th>Fleet Role</th>
                            <th>Helped Setups</th>
                            <th>Count</th>
                            <th>Share Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for share in entry.ratting_shares.with_totals %}
                            <tr>
                                <td style="text-align: left;">
                                    <img src="{{ share.user.profile.main_character|character_portrait_url:32 }}" class="img-circle" style="margin-right: 1rem;">
                                    {{ share.user.profile.main_character.character_name }}
                                </td>
                                <td style="text-align: left;">
                                    <img src="{{ share.user_character|character_portrait_url:32 }}" class="img-circle" style="margin-right: 1rem;">
                                    {{ share.user_character.character_name }}
                                </td>
                                <td>{{ share.role.name }}</td>
                                <td>
                                    {% if share.helped_setup %}
                                        <i class="fas fa-heart fa-heart-red"></i>
                                    {% else %}
                                        <i class="far fa-heart fa-heart-red"></i>
                                    {% endif %}
                                </td>
                                <td>{{ share.site_count }}</td>
                                <td>{{ share.estimated_share_total|floatformat|intcomma }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div style="text-align: right; margin: 10px;">
            <a href="{% url 'allianceauth_pve:rotation_view' entry.rotation_id %}" class="btn btn-primary">Back</a>
            {% if perms.allianceauth_pve.manage_entries and user == entry.created_by or user.is_superuser %}
                <a href="{% url 'allianceauth_pve:edit_entry' entry.rotation_id entry.pk %}" class="btn btn-warning" style="margin-left: 5px;">Edit</a>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteEntryModal" style="margin-left: 5px;">Delete</button>
            {% endif %}
        </div>
    </div>
    {% if perms.allianceauth_pve.manage_entries and user == entry.created_by or user.is_superuser %}
        <div class="modal fade" id="deleteEntryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Delete Entry</h5>
                    </div>
                    <div class="modal-body">
                        <p><b>Are you sure you want to delete this entry?</b></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                        <a href="{% url 'allianceauth_pve:delete_entry' entry.pk %}" class="btn btn-danger" style="margin-left: 5px;">Confirm</a>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock content %}