{% extends "index.html" %}
{% block body %}

    <article class="content-section">
        <img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pic/' + expense.author.profile_image) }}">
        <div class="media-body">
        <div class="article-metadata">
            <a class="mr-2">{{ expense.author.role }}</a>
            <small class="text-muted"> Status: {{ expense.verify_or_decline }} </small>
        </div>
        <div class="article-metadata">
            <a class="mr-2">{{ expense.author.name }} {{ expense.author.surname }}</a>
            <small class="text-muted">Post Date: {{ expense.post_date.strftime('%d-%m-%Y') }}</small>
        </div>
        <div class="article-metadata">
            <div class="row">
                    <div class="col-md-6">
                                <div class="form-group">
                                    <p class="article-title">Client Name: {{ expense.client_name }}</p>
                                </div>
                                <div class="form-group">
                                    <p class="article-content">Client: {{ expense.client_or_saggezza }}</p>
                                </div>
                                <div class="form-group">
                                    <p class="article-content">Expense Date: {{ expense.expenses_date.strftime('%d-%m-%Y') }}</p>
                                </div>
                                <div class="form-group">
                                    <p class="article-content">Client Project: {{ expense.client_project }}</p>
                                </div>
                                <div class="form-group">
                                    <p class="article-content">Billable to client: {{ expense.billable_to }}</p>
                                </div> 
                    </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <p class="article-content">Category: {{ expense.expense_category }}</p>
                            </div>
                            <div class="form-group">
                                <p class="article-content">Payment: {{ expense.payment }}</p>
                            </div>
                            <div class="form-group">
                                <p class="article-content">Receipt: {{ expense.receipt }}</p>
                            </div>
                            <div class="form-group">
                                <p class="article-content">Amount GBP: {{ expense.GBP }} £</p>
                                {% if expense.EUR == '' %}
                                    <p class="article-content">Amount EUR: 0€</p>
                                {% else %}
                                    <p class="article-content">Amount EUR:  {{ expense.EUR }} €</p>
                                {% endif %}
                                {% if expense.USD == '' %}
                                    <p class="article-content">Amount USD: 0$</p>
                                {% else %}
                                    <p class="article-content">Amount USD: {{ expense.USD }} $</p>
                                {% endif %}
                            </div>
                        </div>
            </div>
            <div class="row">
                <div class="card">
                    <p class="article-content">Description: {{ expense.description }}</p>
                </div>
            </div>
            <div class="row">
                {% if expense.receipt_image  %}
                     <div class="outer">
                        <img src="data:;base64,{{ image | safe }}"></img>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="article-metadata">
            {% if current_user.role == 'Manager' and expense.verify_or_decline == 'Pending' %} 
                <div>
                    <a class="btn btn-outline-success" href="{{ url_for('verify', expense_id=expense.expense_id) }}">Verify</a>
                    <a class="btn btn-outline-danger" href="{{ url_for('decline', expense_id=expense.expense_id) }}">Decline</a>
                </div>
            {% endif %}
            {% if current_user.role == 'Admin' and expense.verify_or_decline == 'Pending' %}
                <a class="btn btn-outline-info" href="{{ url_for('edit_expense', expense_id=expense.expense_id) }}">Edit</a>
            {% endif %}
            {% if current_user.role == 'Admin' and expense.verify_or_decline == 'Verify' %}
                <form action="{{ url_for('delete_expense', expense_id=expense.expense_id) }}" method="POST">
                    <input type="submit" class="btn btn-danger" value="Delete">
                </form>
            {% endif %}
            {% if current_user.role == 'Admin' and expense.verify_or_decline == 'Decline' %}
                <form action="{{ url_for('delete_expense', expense_id=expense.expense_id) }}" method="POST">
                    <input type="submit" class="btn btn-danger" value="Delete">
                </form>
            {% endif %}
            {% if expense.verify_or_decline == 'Verify' and current_user == expense.author %}
                <form action="{{ url_for('send_expense', expense_id=expense.expense_id) }}" method="POST">
                    <input type="submit" class="btn btn-outline-primary" value="Send Expense">
                </form>
            {% endif %}
        </div>
            
    </article>

  {% endblock %}