{% extends "base.html.twig" %}

{% block newStyles %}
    <style>
        .nav-tabs > li.active > a, 
        .nav-tabs > li.active > a:focus, 
        .nav-tabs > li.active > a:hover {
            background-color: #337ab7;
            color: #fff;
        }
    </style>
{% endblock %}

{% block title "Manage Project" %} 
{% block content %}
    <div class="col-md-12">
        {% if project is not null %}
        <h3 style="font-weight: 300;">{{ project.name }}</h3>
        <div id="project-tabs" class="panel panel-primary">
            {% set id = project.id %}
            {% set currency = project.currency %}
            <ul class="nav nav-tabs nav-justified">
                <li><a href="#overview" data-toggle="tab"><b>Overview</b></a></li>
                {% if organtype == ORGAN_TYPE_FRONTLINE %}
                <li><a href="#dates" data-toggle="tab"><b>Deadlines</b></a></li>
                <li><a href="#fundsexpected" data-toggle="tab"><b>Funds Expected</b></a></li>
                <li><a href="#invoices" data-toggle="tab"><b>Invoices</b></a></li>
                <li><a href="#fundsreceived" data-toggle="tab"><b>Funds Received</b></a></li>
                <li><a href="#budgets" data-toggle="tab"><b>Budgets</b></a></li>
                {% else %}
                <li><a href="#acebudget" data-toggle="tab"><b>Budget</b></a></li>
                <li><a href="#positions" data-toggle="tab"><b>Experts</b></a></li>
                <li><a href="#com" data-toggle="tab"><b>Communication</b></a></li>
                <li><a href="#comments" data-toggle="tab"><b>Comments</b></a></li>
                <li><a href="#logframe" data-toggle="tab"><b>Logical Framework</b></a></li>
                {# <li><a href="#ts" data-toggle="tab"><b>Timesheets</b></a></li>
                <li><a href="#reports" data-toggle="tab"><b>Reports</b></a></li> #}
                {% endif %}
            </ul>

            <div class="panels">
                <div id="overview">
                    <div style="{{ btnLinks }}"> 
                        <a class="{{ grey_sm_btn }}" href="{{ path('project_edit', {'id': id}) }}">Edit</a>
                        <span class="deleteBtn">
                            <!--
                            BootstrapDialog.show({
                                type: BootstrapDialog.TYPE_DANGER,
                                title: 'Confirm Delete', 
                                message: 'This project will be deleted. All data linked to this project will be lost. Click Delete to proceed.', 
                                buttons: [
                                    {
                                        label: 'Close', 
                                        action: function(dialogRef) {
                                            dialogRef.close();
                                        }
                                    }, {
                                        label: 'Delete', 
                                        icon: 'glyphicon glyphicon-trash', 
                                        cssClass: 'btn-danger', 
                                        autospin: true, 
                                        data: {'id': {{ id }}}, 
                                        action: function() {
                                            window.location.href = '{{ path('project_del', {'id': id}) }}';
                                        }
                                    }
                                ]
                            });
                            -->
                        </span> 
                        {% if project.getStatusLabel() == "Open" %}
                        <a class="{{ grey_sm_btn }}" href="{{ path('project_close', {'id': id}) }}">Close</a>
                        {% endif %}
                    </div>
                    {% if organtype == ORGAN_TYPE_FRONTLINE %}
                        <table class="table table-bordered table-striped" style="{{ tbl_margin }}">
                            <tbody>
                                <tr>
                                    <th>Period</th>
                                    <td>{{ project.getStartsOn|date(date_format) ~ ' to ' ~  project.getEndsOn|date(date_format) }}
                                    </td>
                                </tr>
                                <tr><th>Currency</th><td>{{ currency }}</td></tr>
                                <tr><th>Exchange Rate</th><td>{{ project.exchangeRate|number_format(2) }}</td></tr>
                                <tr><th>Mode of Operation</th><td>{{ project.getModeLabel() }}</td></tr>
                                <tr>
                                    <th>Team</th>
                                    <td>
                                        {% for member in team %}
                                        {{ member.member.fullname }}<br/>
                                        {% endfor %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td>{{ project.getStatusLabel() }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-bordered table-striped" style="{{ tbl_margin }}">
                            <thead>
                                <tr><th colspan="4" class="center-text">Expected vs Received</th></tr>
                                <tr>
                                    <th>Client</th><th>Expected ({{ currency }})</th>
                                    <th>Received ({{ currency }})</th>
                                    <th>Balance ({{ currency }})</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for id, detail in data %}
                                <tr>
                                    <td>{{ detail.name }}</td>
                                    <td>{{ detail.exp|number_format(2) }}</td>
                                    <td>{{ detail.rec|number_format(2) }}</td>
                                    <td>{{ detail.bal|number_format(2) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <table class="table table-bordered table-striped" style="{{ tbl_margin }}">
                            <tbody>
                                <tr><th>Client(s)</th><td>{{ project.getClientDetails() }}</td></tr>
                                <tr><th>Project Title</th><td>{{ project.name }}</td></tr>
                                <tr><th>Project Number</th><td>{{ project.number }}</td></tr>
                                <tr><th>Country</th><td>{{ project.getCountryName() }}</td></tr>
                                <tr><th>Budget</th><td>{{ currency ~ ' ' ~ project.budget|number_format }}</td></tr>
                                <tr><th>Status</th><td>{{ project.getStatusLabel() }}</td></tr>
                                <tr><th>Tender Type</th><td>{{ project.getTenderTypeLabel() }}</td></tr>
                                <tr><th>Grant Role</th><td>{{ project.getGrantRoleLabel() }}</td></tr>
                                <tr><th>Expected Duration (in Years)</th><td>{{ project.duration }}</td></tr>
                                <tr>
                                    <th>Expected Start Date</th>
                                    <td>
                                        {% if project.startsOn is not null %}
                                        {{ project.startsOn|date(date_format) }}
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Deadline</th>
                                    <td>
                                        {% if project.extDeadline is not null %}
                                            {{ project.extDeadline|date(date_format) }}
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Internal Deadline</th>
                                    <td>
                                        {% if project.intDeadline is not null %}
                                            {{ project.intDeadline|date(date_format) }}
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr><th>Timesheet Template</th><td>{{ project.getTsTemplateLabel() }}</td></tr>
                                <tr><th>Description</th><td>{{ project.description|raw }}</td></tr>
                                <tr><th>Reference Number</th><td>{{ project.notes }}</td></tr>
                            </tbody>
                        </table>
                    {% endif %}

                    {{ include('AlsuiteFinanceBundle:Project:del.html.twig',
                        {'id': id, 'action': 'Delete', 'object': 'Project',
                        'route': path('project_del', {'id': id})})
                    }}
                </div>
                {% if organtype == ORGAN_TYPE_FRONTLINE %}
                    <div id="dates">
                        <div style="{{ btnLinks }}"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('deadline_add', {'id': id}) }}">Add</a>
                        </div>
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr><th>Date</th><th>Details</th><th>Alert Days<th><th></th></tr>
                                {% for deadline in deadlines %}
                                {% set did = deadline.id %}
                                <tr>
                                    <td>{{ deadline.deadline|date(date_format) }}</td>
                                    <td>{{ deadline.details }}</td>
                                    <td>{{ deadline.daysOfAlerts }}</td>
                                    <td>
                                        <a class="{{ tbl_link }}" href="{{ path('deadline_edit', {'id': did}) }}">Edit</a>
                                        <a class="{{ tbl_link }}" data-toggle="modal" href="#date{{ did }}">Delete</a>

                                        {{ include('AlsuiteComBundle:Deadline:del.html.twig',
                                            {'id': did, 'action': 'Delete', 'object': 'Project Deadline',
                                            'route': path('deadline_delete', {'id': did}), 'modal': 'date'})
                                        }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div id="fundsexpected">
                        <div style="{{ btnLinks }}"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('funds_expected_add', {'id': id}) }}">Add</a>
                        </div>
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr><th>Client</th><th>Total Expected ({{ currency }})</th><th>Notes</th><th>Due Date</th><th>Actions</th></tr>
                                {% for fundsExpected in project.getContacts() if fundsExpected.type == TYPE_FUNDS_EXPECTED %}
                                {% set fid = fundsExpected.id %}
                                <tr>
                                    <td>{{ fundsExpected.contact.getName() }}</td>
                                    <td>{{ fundsExpected.amount|number_format(2) }}</td>
                                    <td>{{ fundsExpected.notes }}</td><td>{{ fundsExpected.dueDate|date(date_format) }}</td>
                                    <td>
                                        <a class="{{ tbl_link }}" href="{{ path('funds_expected_edit', {'id': fid}) }}">Edit</a>
                                        <a class="{{ tbl_link }}" data-toggle="modal" href="#fundsExp{{ fid }}">Delete</a>

                                        {{ include('AlsuiteFinanceBundle:Project:delFundsExpected.html.twig',
                                            {'id': fid, 'action': 'Delete', 'object': 'Funds Expected',
                                            'route': path('funds_expected_del', {'id': fid}), 'modal': 'fundsExp'})
                                        }}
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="5">No funds expected records have been added yet.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div id="invoices">
                        <div style="{{ btnLinks }}"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('invoice_create', {'project': id}) }}">Add</a>
                        </div>
                        <table class="table table-bordered table-striped">
                            <colgroup>
                                <col style="width: available;"/><col style="width: 10%;"/>
                                <col style="width: 15%;"/><col style="width: 15%;"/>
                                <col style="width: 10%;"/><col style="width: 20%;"/>
                                <col style="width: 10%;"/>
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>Client</th><th>Due Date</th>
                                    <th>Amount ({{ currency }})</th>
                                    <th>Paid ({{ currency }})</th><th>Status</th>
                                    <th>Terms & Notes</th><th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for invoice in project.getInvoices() %}
                                {% set invId = invoice.id %}
                                <tr>
                                    <td>{{ invoice.client.getName() }}</td>
                                    <td>{{ invoice.dueDate|date(date_format) }}</td>
                                    <td>{{ invoice.getTotalAmountWithTaxes()|number_format(2) }}</td>
                                    <td>{{ invoice.getTotalAmountPaid()|number_format(2) }}</td>
                                    <td>{{ invoice.getStatusLabel() }}</td>
                                    <td>
                                        {% if invoice.terms is not null %}
                                        {{ invoice.terms }}<br/><br/>
                                        {% endif %}

                                        {{ invoice.notes }}
                                    </td>
                                    <td>
                                        <a class="{{ tbl_link }}" href="{{ path('invoices_list', {'id': invId}) }}">View</a>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="7">No invoices have been created yet.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div id="fundsreceived">
                        <div style="{{ btnLinks }}"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('contributor_add', {'id': id}) }}">Receive Funds</a>
                        </div>
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr><th>Client</th><th>Received On</th><th>Amount ({{ currency }})</th><th>Actions</th></tr>
                                {% for contributor in project.getContributors() %}
                                {% set cid = contributor.getId() %}
                                <tr>
                                    <td>{{ contributor.getDonor().getName() }}</td>
                                    <td>{{ contributor.getReceivedOn()|date(date_format) }}</td>
                                    <td>{{ contributor.getAmount()|number_format(2) }}</td>
                                    <td>
                                        <a class="{{ tbl_link }}" href="{{ path('contributors_update', {'id': cid}) }}">Edit</a>
                                        <a class="{{ tbl_link }}" data-toggle="modal" href="#client{{ cid }}">Delete</a>

                                        {{ include('AlsuiteFinanceBundle:Project:delContributor.html.twig',
                                            {'id': cid, 'action': 'Delete', 'object': 'contributor',
                                            'route': path('contributor_del', {'id': cid}), 'modal': 'client'})
                                        }}
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="4">No funds receipt records have been added yet.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div id="budgets">
                        <div style="{{ btnLinks }}"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('budget_create', {'project': id}) }}">Add</a> 
                        </div>
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <th>Start Date</th><th>End Date</th><th>Status</th><th>Amount</th><th>Actions</th>
                                </tr>
                                {% for budget in project.getBudgets() %}
                                {% set bid = budget.getId() %}
                                <tr>                          
                                    <td>{{ budget.getStartsOn()|date(date_format) }}</td>
                                    <td>{{ budget.getEndsOn()|date(date_format) }}</td>
                                    <td>{{ budget.getStatus() }}</td>
                                    <td>{{ organCurrency }} {{ budget.getAmount()|number_format(2) }}</td>
                                    <td>
                                        <a class="{{ tbl_link }}" href="{{ path('budget_edit', {'id': bid}) }}">Edit</a>
                                        <a class="{{ tbl_link }}" data-toggle="modal" href="#budget{{ bid }}">Delete</a>
                                        {{ include('AlsuiteFinanceBundle:Budget:del.html.twig',
                                            {'id': bid, 'action': 'Delete', 'object': 'budget',
                                            'route': path('budget_del', {'id': bid}),'modal': 'budget'})
                                        }}
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="5">No budgets have been created under this project yet.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div id="acebudget">
                        {% if budget is not null %}
                        <div style="display: flex; gap: 10px; padding: 10px;">
                            <div style="{{ btnLinks }} "> 
                                <a class="{{ grey_sm_btn }}" href="{{ path('ace_budget_edit', {'id': budget.id}) }}">Edit</a> 
                            </div>
                        </div>   
                        {% else %}
                        <div style="{{ btnLinks }}; padding: 10px;"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('ace_budget_create', {'project': id}) }}">Create</a> 
                        </div>
                        {% endif %}
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <th>Details</th><th>Unit</th><th>Units</th><th>Rate ({{ currency }})</th><th>Margin (%)</th><th>Unit Sale ({{ currency }})</th><th>Effort (%)</th><th>Total Cost ({{ currency }})</th><th>Total Margin ({{ currency }})</th><th>Total Sale({{ currency }})</th>
                                </tr>
                                {% for cat,items in spreads.items %}
                                <tr><th colspan="10">{{ cat }}</th></tr>
                                {% for item in items %}
                                <tr>
                                    <td>{{ item.details }}</td>
                                    <td>{{ item.unit }}</td>
                                    <td>{{ item.units }}</td>
                                    <td>{{ item.rate|number_format }}</td>
                                    <td>{{ item.marginPerUnit|number_format }}</td>
                                    <td>{{ item.salePerUnit|number_format }}</td>
                                    <td>{{ item.loe }}</td>
                                    <td>{{ item.itemCost|number_format }}</td>
                                    <td>{{ item.itemMargin|number_format }}</td>
                                    <td>{{ item.itemSale|number_format }}</td>
                                </tr>
                                {% endfor %}
                                {% else %}
                                <tr>
                                    <td colspan="10">No budget lines have been created under this project yet.</td>
                                </tr>
                                {% endfor %}
                                <tr>
                                    <th colspan="7" style="text-align: right;">Totals (excl Indirect Costs)</th>
                                    <td style="font-size: 15px; font-weight: bold;">{{ spreads.ettls.ttlCost|number_format() }}</td>
                                    <td style="font-size: 15px; font-weight: bold;">{{ spreads.ettls.ttlMargin|number_format() }}</td>
                                    <td style="font-size: 15px; font-weight: bold;">{{ spreads.ettls.ttlSale|number_format() }}</td>
                                </tr>
                                <tr><th colspan="10">Indirect Costs</th></tr>
                                {% for item in spreads.indirectCostItems %}
                                <tr>
                                    <td>{{ item.details }}</td>
                                    <td>{{ item.unit }}</td><td></td><td></td>
                                    <td>{{ item.marginPerUnit|number_format }}</td>
                                    <td></td><td></td>
                                    <td>{{ item.itemCost|number_format }}</td>
                                    <td></td>
                                    <td>{{ item.itemSale|number_format }}</td>
                                </tr>
                                {% else %}
                                <tr><td colspan="10">There are no indirect cost items at the moment</td></tr>
                                {% endfor %}
                                <tr>
                                    <th colspan="7" style="text-align: right;">Totals (incl Indirect Costs)</th>
                                    <td style="font-size: 15px; font-weight: bold;">{{ spreads.ittls.ttlCost|number_format() }}</td>
                                    <td style="font-size: 15px; font-weight: bold;">{# spreads.ettls.ttlMargin|number_format() #}</td>
                                    <td style="font-size: 15px; font-weight: bold;">{{ spreads.ittls.ttlSale|number_format() }}</td>
                                </tr>
                            </tbody>  
                        </table>
                    </div>
                    <div id="positions">
                        <div style="{{ btnLinks }}"> 
                            <a class="{{ grey_sm_btn }}" href="{{ path('project_position_add', {'id': id}) }}">Add Expert Position</a> 
                        </div>

                        {% for position in project.positions %}
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 style="font-weight: 300;">
                                    {% if position.budgetLine is not null %}
                                    {{ position.budgetLine.details }}
                                    {% else %}
                                    {{ position.title }}
                                    {% endif %}
                                    </h4>
                                    <a class="{{ tbl_link }}" href="{{ path('project_position_edit', {'id': position.id}) }}">Edit</a>
                                    <a class="{{ tbl_link }}" href="{{ path('expert_search_filter', {'position': position.id}) }}">Search &amp; Add Experts</a> 
                                    <span class="deleteLink">
                                        <!--
                                        BootstrapDialog.show({
                                            type: BootstrapDialog.TYPE_DANGER,
                                            title: 'Confirm Delete', 
                                            message: 'This position and all experts linked to it will be deleted. Click Delete to proceed.', 
                                            buttons: [
                                                {
                                                    label: 'Close', 
                                                    action: function(dialogRef) {
                                                        dialogRef.close();
                                                    }
                                                }, {
                                                    label: 'Delete', 
                                                    icon: 'glyphicon glyphicon-trash', 
                                                    cssClass: 'btn-danger', 
                                                    autospin: true, 
                                                    data: {'id': {{ position.id }}}, 
                                                    action: function() {
                                                        window.location.href = '{{ path('project_position_delete', {'id': position.id}) }}';
                                                    }
                                                }
                                            ]
                                        });
                                        -->
                                    </span>
                                </div>
                                <div class="panel-body">
                                    {% for linked in position.experts %}
                                        {% set expert = linked.expert %}
                                        <div class="row">
                                            <div class="col-md-3">
                                                <table class="table" style="{{ tbl_margin }}">
                                                    <tbody>
                                                        <tr><td>{{ linked.getStatusLabel() }}</td></tr>
                                                        <tr>
                                                            <td>
                                                                
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="col-md-3">
                                                <table class="table" style="{{ tbl_margin }}">
                                                    <tbody>
                                                        <tr><td>{{ expert.getTitleLabel() ~ ' ' ~ expert.firstname ~ ' ' ~ expert.lastname }}</td></tr>
                                                        <tr><td>E-Mail: {{ expert.email }}</td></tr>
                                                        <tr><td>Mobile: {{ expert.phone }}</td></tr>
                                                        <tr><td>Skype: {{ expert.skype }}</td></tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="col-md-3"></div>
                                            <div class="col-md-3"></div>
                                            <div class="col-md-12">
                                                <a class="{{ tbl_link }}" href="{{ path('position_expert_edit', {'id': linked.id}) }}">Change Status</a>
                                                <a class="{{ tbl_link }}" href="{{ path('expert_home', {'id': expert.id}) }}">View Expert Details</a>
                                                <span class="deleteLink">
                                                    <!--
                                                    BootstrapDialog.show({
                                                        type: BootstrapDialog.TYPE_DANGER,
                                                        title: 'Confirm Delete', 
                                                        message: 'This expert will be removed from this position. Click Delete to proceed.', 
                                                        buttons: [
                                                            {
                                                                label: 'Close', 
                                                                action: function(dialogRef) {
                                                                    dialogRef.close();
                                                                }
                                                            }, {
                                                                label: 'Delete', 
                                                                icon: 'glyphicon glyphicon-trash', 
                                                                cssClass: 'btn-danger', 
                                                                autospin: true, 
                                                                data: {'id': {{ linked.id }}}, 
                                                                action: function() {
                                                                    window.location.href = '{{ path('position_expert_delete', {'id': linked.id}) }}';
                                                                }
                                                            }
                                                        ]
                                                    });
                                                    -->
                                                </span>
                                                {% if linked.status == EXPERT_CONTRACTED %}
                                                <a class="{{ tbl_link }}" href="{{ path('contract_type_select', {'project': id, 'expert': expert.id, 'pe': linked.id}) }}">Add Contract</a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% else %}
                                        Please search and add experts for this position.
                                    {% endfor %}
                                </div>
                            </div>
                        {% else %}
                            There are no positions highlighted under this project currently.
                        {% endfor %}
                    </div>

                    <div id="com">
                        {% if message is null %}
                            {% set note = constant('Alsuite\\ExpertsBundle\\Entity\\ExpertMessage::TYPE_NOTE') %}
                            {% set email = constant('Alsuite\\ExpertsBundle\\Entity\\ExpertMessage::TYPE_EMAIL') %}
                            <div style="{{ btnLinks }}"> 
                                <a class="{{ grey_sm_btn }}" href="{{ path('expert_note_add', {'project': id}) }}">Add Note</a>
                                <a class="{{ grey_sm_btn }}" href="{{ path('expert_email_add', {'project': id}) }}">Send Email</a>
                            </div>

                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr><th>Type</th><th>Expert</th><th>Subject</th><th>Last Contact</th><th>Last Update</th></tr>
                                </thead>
                                <tbody>
                                    {% for com in coms %}
                                        <tr>
                                            <td>{{ com.getTypeLabel() }}</td>
                                            <td>{{ com.expert.fullname }}</td>
                                            <td><a href="{{ path('project_view', {'id': id, 'msg': com.id}) ~ '#com' }}">{{ com.subject }}</a></td>
                                            <td>{{ com.getLastContactBy() }}</td>
                                            <td>{{ com.getLastContactOn()|date(date_format) }}</td>
                                        </tr>
                                    {% else %}
                                        <tr><td colspan="5">There are currently no messages or notes.</td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            <div style="{{ btnLinks }}">
                                <a class="{{ grey_sm_btn }}" href="{{ path('project_view', {'id': id}) ~ '#com' }}">Back to List</a>
                            </div>
                            <table class="table" style="font-size: 14px;">
                                <colgroup><col style="width: 30%;"/><col style="width: available;"</colgroup>
                                <tbody>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>
                                            <h3 style="font-weight: 300;">{{ message.subject }}</h3>
                                            <br/>
                                            ({{ message.counter ~ ' messages' }})
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            {% if message.isANote() %}
                                <table class="table" style="font-size: 14px;">
                                    <colgroup><col style="width: 30%;"/><col style="width: available;"</colgroup>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <strong>{{ message.addedOn|date(date_format) }}</strong><br/>
                                                {{ message.getTypeLabel() }}
                                            </td>
                                            <td>
                                                <strong>Author: </strong>{{ message.addedBy.getFullname() }}<br/><br/>
                                                {{ message.details|raw }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            {% else %}
                                <table class="table" style="font-size: 14px;">
                                    <colgroup><col style="width: 30%;"/><col style="width: available;"</colgroup>
                                    <tbody>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td>
                                                <a class="{{ blue_sm_btn }}" href="{{ path('expert_message_reply', {'id': message.id}) }}">Write a Reply</a>
                                            </td>
                                        </tr>
                                        {% for child in message.children %}
                                            <tr>
                                                <td>
                                                    <strong>{{ child.addedOn|date(date_format) }}</strong><br/>
                                                    {{ child.getTypeLabel() }}
                                                </td>
                                                <td>
                                                    <strong>From: </strong>
                                                    {% if child.addedBy is null %}
                                                        {{ child.sender }}
                                                    {% else %}
                                                        {{ child.addedBy.fullname }}
                                                    {% endif %}<br/>
                                                    <strong>Sent: </strong>{{ child.addedOn|date('d-M Y H:i:s') }}<br/><br/>
                                                    {{ child.details|raw }}
                                                    {% for doc in child.attachments %}
                                                        {% set filepath = app.request.schemeAndHttpHost ~ '/uploads/' ~ doc.path %}
                                                        <a class="{{ tbl_link }}" target="_blank" href="https://docs.google.com/viewer?docex=1&url={{ filepath }}">
                                                            <span style="font-size: 16px;" class="glyphicon glyphicon-file"></span> {{ doc.name }}
                                                        </a><br/>
                                                    {% endfor %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        <tr>
                                            <td>
                                                <strong>{{ message.addedOn|date(date_format) }}</strong><br/>
                                                {{ message.getTypeLabel() }}
                                            </td>
                                            <td>
                                                <strong>From: </strong>{{ message.addedBy.fullname }}<br/>
                                                <strong>Sent: </strong>{{ message.addedOn|date('d-M Y H:i:s') }}<br/><br/>
                                                {{ message.details|raw }}
                                                {% for doc in message.attachments %}
                                                    {% set filepath = app.request.schemeAndHttpHost ~ '/uploads/' ~ doc.path %}
                                                    <a class="{{ tbl_link }}" target="_blank" href="https://docs.google.com/viewer?docex=1&url={{ filepath }}">
                                                        <span style="font-size: 16px;" class="glyphicon glyphicon-file"></span> {{ doc.name }}
                                                    </a><br/>
                                                {% endfor %}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            {% endif %}
                        {% endif %}
                    </div>
                    <div id="comments">
                        <table class="table" style="font-size: 14px;">
                            <colgroup><col style="width: 30%;"/><col style="width: available;"</colgroup>
                            <tbody>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>
                                        <a class="{{ blue_sm_btn }}" href="{{ path('expert_comment_add', {'project': id}) }}">Write a new Comment</a>
                                    </td>
                                </tr>
                                {% for comment in comments %}
                                    <tr>
                                        <td>
                                            <strong>{{ comment.createdOn|date(date_format) }}</strong>
                                        </td>
                                        <td>
                                            <strong>Expert: </strong>
                                            {{ comment.expert.fullname }}<br/>
                                            <strong>Author: </strong>
                                            {{ comment.author.fullname }}<br/>
                                            {# if comment.project is not null %}
                                                <strong>Project: </strong>
                                                <a href="{{ path('project_view', {'id': comment.project.id}) }}">{{ comment.project.name }}</a><br/>
                                            {% endif #}
                                            <br/>
                                            {{ comment.comment|raw }}

                                            {% if comment.isCommentCreator(app.user) %}
                                                <a class="{{ tbl_link }}" href="{{ path('expert_comment_edit', {'id': comment.id}) }}">Edit</a>
                                                <span class="deleteBtn">
                                                    <!--
                                                    BootstrapDialog.show({
                                                        type: BootstrapDialog.TYPE_DANGER,
                                                        title: 'Confirm Delete', 
                                                        message: 'This comment will be deleted. Click Delete to proceed.', 
                                                        buttons: [
                                                            {
                                                                label: 'Close', 
                                                                action: function(dialogRef) {
                                                                    dialogRef.close();
                                                                }
                                                            }, {
                                                                label: 'Delete', 
                                                                icon: 'glyphicon glyphicon-trash', 
                                                                cssClass: 'btn-danger', 
                                                                autospin: true, 
                                                                data: {'id': {{ comment.id }}}, 
                                                                action: function() {
                                                                    window.location.href = '{{ path('expert_comment_delete', {'id': comment.id}) }}';
                                                                }
                                                            }
                                                        ]
                                                    });
                                                    -->
                                                </span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>There are no comments currently.</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div id="logframe">
                        <div id="logframe-tabs">
                            <ul class="nav nav-tabs nav-justified">
                                <li><a href="#outc" data-toggle="tab"><b>Outcomes</b></a></li>
                                <li><a href="#outp" data-toggle="tab"><b>Outputs</b></a></li>
                                <li><a href="#inds" data-toggle="tab"><b>Output Indicators</b></a></li>
                                <li><a href="#actblocks" data-toggle="tab"><b>Activity Blocks</b></a></li>
                            </ul>

                            <div class="panels">
                                <div id="outc">
                                    <div style="{{ btnLinks }}"> 
                                        <a class="{{ grey_sm_btn }}" href="{{ path('outcome_add', {'id': id}) }}">Add</a>
                                    </div>
                                    <table class="table table-bordered table-striped" style="{{ tbl_margin }}">
                                        <thead><tr><th>Description</th><th></th></tr></thead>
                                        <tbody>
                                            {% for outcome in project.outcomes %}
                                            {% set oid = outcome.id %}
                                            <tr>
                                                <td>{{ outcome.outcome }}</td>
                                                <td>
                                                    <a class="{{ tbl_link }}" href="{{ path('outcome_edit', {'id': oid}) }}">Edit</a>
                                                    <a data-toggle="modal" class="{{ tbl_link }}" href="#outcome{{ oid }}">Delete</a>
                                                    <a class="{{ tbl_link }}" href="{{ path('output_central_add', {'project': id, 'outcome': oid}) }}">Add Outputs</a>

                                                    {{ include('AlsuiteProjectBundle:Outcome:del.html.twig',
                                                        {'id': oid, 'action': 'Delete', 'object': 'Outcome',
                                                        'route': path('outcome_del', {'id': oid}), 'modal': 'outcome'})
                                                    }}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <div id="outp">
                                    <div style="{{ btnLinks }}"> 
                                        <a class="{{ grey_sm_btn }}" href="{{ path('output_central_add', {'project': id}) }}">Add</a>
                                    </div>
                                    <table class="table table-bordered table-striped tablesorter" style="{{ tbl_margin }}">
                                        <thead>
                                            <tr>
                                                <th>Outcome</th><th>Output</th><th>Weight</th><th>Period</th><th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for output in outputs %}
                                            {% set opid = output.id %}
                                            <tr>
                                                <td width="35%">
                                                    {% if output.outcome is not null %}
                                                    {{ output.outcome.outcome }}
                                                    {% endif %}
                                                </td>
                                                <td width="30%">{{ output.output }}</td>
                                                <td width="10%">{{ output.weight }}</td>
                                                <td width="25%">
                                                    <a class="{{ tbl_link }}" href="{{ path('output_edit', {'id': opid}) }}">Edit</a>
                                                    <a data-toggle="modal" class="{{ tbl_link }}" href="#output{{ opid }}">Delete</a>
                                                    <a class="{{ tbl_link }}" href="{{ path('output_ind_central_create', {'output': opid}) }}">Add Indicators</a>
                                                    <a class="{{ tbl_link }}" href="{{ path('act_block_add', {'output': opid, 'project': id}) }}">Add Activity Blocks</a>

                                                    {{ include('AlsuiteProjectBundle:StrategicPlanOutput:del.html.twig',
                                                        {'id': opid, 'action': 'Delete', 'object': 'Output', 'modal': 'output', 
                                                        'route': path('output_del', {'id': opid})})
                                                    }}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <div id="inds">
                                    <table class="table table-bordered table-striped tablesorter" style="{{ tbl_margin }}">
                                        <thead>
                                            <tr>
                                                <th>Output</th>
                                                <th>Name</tg><th>Tracked</th>
                                                <th>Weight</th><th>Baseline</th>
                                                <th>Target</th><th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for output in outputs %}
                                            {% for ind in output.indicators %}
                                            {% set oind = ind.id %}
                                            <tr>
                                                <td width="25%">{{ output.output }}</td>
                                                <td width="25%">{{ ind.details }}</td>
                                                <td width="16%">{{ ind.getTrackingTypeLabel() }}</td>
                                                <td width="8%">{{ ind.weight }}</td>
                                                <td width="8%">{{ ind.baseline }}</td>
                                                <td width="8%">{{ ind.target }}</td>
                                                <td width="15%">
                                                    <a class="{{ tbl_link }}" href="{{ path('output_ind_edit', {'oi': oind}) }}">Edit</a>
                                                    <a class="{{ tbl_link }}" data-toggle="modal" href="#inddel{{ oind }}">Delete</a>

                                                    {{ include('AlsuiteProjectBundle:OutputIndicator:del.html.twig',
                                                        {'id': oind, 'action': 'Delete', 'object': 'Indicator', 
                                                        'modal': 'inddel', 
                                                        'route': path('output_ind_del', {'id': oind})})
                                                    }}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <div id="actblocks">
                                    <div style="{{ btnLinks }}"> 
                                        <a class="{{ grey_sm_btn }}" href="{{ path('act_block_add', {'project': id}) }}">Add</a>
                                    </div>
                                    <table class="table table-bordered table-striped">
                                        <colgroup>
                                            <col style="width: available;"/>
                                            <col style="width: 30%;"/><col style="width: 10%;"/>
                                            <col style="width: 15%;"/>
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>Output</th><th>Activity Block Details</th>
                                                <th>Status</th><th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for actBlock in actBlocks %}
                                            {% set aid = actBlock.id %}
                                            <tr>
                                                <td>
                                                    {% if actBlock.output is not null %}
                                                    {{ actBlock.output.output }}
                                                    {% endif %}
                                                </td>
                                                <td>{{ actBlock.details }}</td>
                                                <td>{{ actBlock.getStatus() }}</td>
                                                <td>
                                                    <a href="{{ path('act_block_edit', {'id': aid}) }}">Edit</a>
                                                    {% if actBlock.isActive() %}
                                                    <a data-toggle="modal" href="#deact{{ aid }}">Deactivate</a>

                                                    {{ include('AlsuiteProjectBundle:ActivityBlock:deactivate.html.twig',
                                                        {'id': aid, 'action': 'Deactivate', 'object': 'Activity Block', 
                                                        'modal': 'deact', 
                                                        'route': path('act_block_deactivate', {'id': aid})})
                                                    }}
                                                    {% else %}
                                                    <a data-toggle="modal" href="#act{{ aid }}">Activate</a>

                                                    {{ include('AlsuiteProjectBundle:ActivityBlock:activate.html.twig',
                                                        {'id': aid, 'action': 'Activate', 'object': 'Activity Block', 
                                                        'modal': 'act', 
                                                        'route': path('act_block_activate', {'id': aid})})
                                                    }}
                                                    {% endif %}
                                                    <a data-toggle="modal" href="#actdel{{ aid }}">Delete</a>

                                                    {{ include('AlsuiteProjectBundle:ActivityBlock:del.html.twig',
                                                        {'id': aid, 'action': 'Delete', 'object': 'Activity Block', 'modal': 'actdel', 
                                                        'route': path('act_block_delete', {'id': aid})})
                                                    }}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        {% else %}
            We are sorry, but we cannot find the selected project. Please try again.
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $('#project-tabs, #logframe-tabs').easytabs();

        $(function() {
            $('.deleteBtn').each(function(index) {
                var $section = $(this);
                var code = $(this).html().replace('<!--', '').replace('-->', '');

                var $link = $('<a class="btn btn-sm btn-default">Delete</a>');
                $link.on('click', {code: code}, function(event) {
                    eval(event.data.code);
                });
                //$link.insertAfter($section);
                $section.append($link);
                //$('<div class="clearfix" style="margin-bottom: 3px;"></div>').insertAfter($link);
            });
        });
        
        $(function() {
            $('.deleteLink').each(function(index) {
                var $section = $(this);
                var code = $(this).html().replace('<!--', '').replace('-->', '');

                var $link = $('<a class="btn btn-xs btn-action">Delete</a>');
                $link.on('click', {code: code}, function(event) {
                    eval(event.data.code);
                });
                //$link.insertAfter($section);
                $section.append($link);
                //$('<div class="clearfix" style="margin-bottom: 3px;"></div>').insertAfter($link);
            });
        });
    });
</script>
{% endblock %}