@model PantheonRA.WebApi.Contracts.TravelOrderDistance
@{
    var distanceNum = (int)ViewBag.Enumerator;
    var distancesId = "DistanceViewModels[" + distanceNum + "].Distance.{0}";
    var homeAddress = string.Empty;
    var costs = (decimal)ViewBag.ExpensesTotal;
    var expensesTotal = costs + (decimal)Model.Mileage.Value;
    var travelTime = Model.DateHourFrom.HasValue && Model.DateHourTo.HasValue
        ? Model.DateHourTo - Model.DateHourFrom : null;

    var travelTimeFormatted = "0d 0h 0m";

    if (travelTime != null)
    {
        travelTimeFormatted = string.Format("{0}d {1}h {2}m", 
            travelTime.Value.Days,
            travelTime.Value.Hours,
            travelTime.Value.Minutes);
    }

    var collapseAttributes = string.Format(
        "data-toggle=collapse href=#collapse-{0} class=open-position",
        distanceNum);
}

<table class="table table-bordered destination-table">
    <tbody>
        <tr>
            <td style="width: 40%">
                <div class="row">
                    <div class="col-md-1 col-xs-1 open-position" @collapseAttributes>
                        <div class="panel-heading" role="tab" id="heading-@distanceNum">
                            <h4 class="panel-title" style="padding-top: 3px;">
                                <a class="collapsed text-success" 
                                   role="button"
                                   data-toggle="collapse"
                                   href="#collapse-@distanceNum"
                                   aria-controls="ariaCollapse-@distanceNum">
                                </a>
                            </h4>
                        </div>
                    </div>
                    <div class="col-md-1 col-xs-1 open-position" @collapseAttributes>
                        <i class="far fa-map-marker-alt text-success" style="padding-top:14px"></i>
                    </div>
                    <div class="col-md-10 col-xs-8 node-distance">
                        <select id=@string.Format("{0}-{1}", distanceNum, "NodeDistance")
                                name=@string.Format(distancesId, "Node")
                                class="form-control select2withAPI"
                                onchange="setDistanceKilometers($(this), 'Km');"
                                data-column-names="@Loc.Company,@Loc.Name,@Loc.Address,@Loc.Post"
                                data-bootstrap-columns="col-md-4,col-md-4,col-md-3,col-md-1"
                                data-search-width="700"
                                data-url=@Url.Action("SubjectDropdownValues", "Subjects")>
                            <option selected value="@Model.Node" title="@Loc.Destination">@Model.DisplayNode</option>
                        </select>
                    </div>
                </div>
            </td>
            <td style="width: 10%">
                <a @collapseAttributes title="@Loc.Away">
                    <i class="far fa-clock alt text-success"
                       style="padding-top:14px"></i> @travelTimeFormatted
                </a>
            </td>
            <td style="width: 15%">
                <a @collapseAttributes title="@Loc.DateFrom">
                    <i class="far fa-calendar alt text-success"
                       style="padding-top:14px"></i>
                    @(Model.DateHourFrom.HasValue ? 
                      Model.DateHourFrom.Value.ToString(Loc.DateTime24Format) :
                      string.Empty)
                </a>
            </td>
            <td style="width: 11%">
                <a @collapseAttributes title="@Loc.DrivenKm">
                    <i class="far fa-road alt text-success" 
                       style="padding-top:14px"></i> @Model.KmString @Loc.Km
                </a>
            </td>
            <td style="width: 12%">
                <a @collapseAttributes title="@Loc.Value">
                    <i class="far fa-coins alt text-success" 
                       style="padding-top:14px"></i> 
                    <span id="distance-total-amount-@distanceNum" data-cost="@costs.ToString("N2")">@expensesTotal.ToString("N2")</span>
                    <span class="default-currency-text text-muted"></span>
                </a>
            </td>
            <td style="width: 12%">
                <div class="row">
                    <div class="col-md-4" style="max-height:0px;padding-top:8px">
                        <a @collapseAttributes>
                            <span class="badge" title="@Loc.CounterBy">@Model.KMCounterAfterString</span>
                        </a>
                    </div>

                    <div class="pull-right col-md-8 col-sm-6 col-xs-8 distances-icons icons-right-mobile">
                        <button onclick="openNoteModal(@distanceNum)"
                                type="button"
                                id="note-button-@distanceNum"
                                class="btn btn-link icons-padding @(string.IsNullOrEmpty(Model.ReturnNote) ? string.Empty : "text-primary")">
                            <i class="fa fa-comment" title="@Loc.ReturnReport"></i>
                        </button>

                        <input id="return-note-@distanceNum"
                               value="@Model.ReturnNote"
                               name="@string.Format(distancesId, "ReturnNote")"
                               class="hidden">

                        <button type="button"
                                onclick='DeleteDistance("DistancesTable-@distanceNum", @distanceNum)'
                                class="btn btn-outline icons-padding">
                            <span class="far fa-trash-alt"></span>
                        </button>
                    </div>
                </div>
                
            </td>
        </tr>
    </tbody>
</table>