@model MrCMS.Web.Apps.Ecommerce.Pages.Product
<div id="specification-list">
    <div class="row">
        <div class="col-lg-6">
            <h4>Specifications</h4>
        </div>
        <div class="col-lg-6">
            <div class="btn-group pull-right">
                @Html.ActionLink("Sort", "SortSpecifications", "Product", new { productId = Model.Id }, new { @class = "btn btn-xs btn-default", data_toggle = "fb-modal" })
                @Html.ActionLink("Add", "AddSpecification", "Product", new { id = Model.Id }, new { @class = "btn btn-xs btn-default", data_toggle = "fb-modal" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            @if (Model.SpecificationValues.Any())
            {
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>Attribute</th>
                            <th>Value</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.SpecificationValues.OrderBy(x => x.DisplayOrder))
                        {
                            <tr>
                                <td>@item.SpecificationName</td>
                                <td>@item.Value</td>
                                <td>@Html.ActionLink("Remove", "RemoveSpecification", "Product", new { id=Model.Id, specificationValueId = item.Id }, new { @class = "btn btn-danger btn-xs pull-right", data_toggle = "fb-modal" })</td>
                            </tr>
                        }
                    </tbody>
                </table>
            }
            else
            {
                <p>Please click Add to add a specification.</p>
            }
        </div>
    </div>
</div>
