@model IEnumerable<IGrouping<BlogIndexKey,Blog>>
@{
    ViewData["Title"] = "Blogs, l'index";
    // Regroup!?!
    @foreach (var group in Model) {
    }
}
@section header {
    <style>
        .collapsed {
            height: 1em;
        }
        .sametitle {
            overflow: hidden;
            transition: height 1s;
        }
        td {
            transition: height 1s;
        }
        </style>
}
@section scripts {
    <script>
        $(document).ready(function () {
                $(".sametitle").addClass("collapsed")
                .on("mouseover",function(){
                    $(this).removeClass("collapsed")
                }).on("mouseout",function(){
                    $(this).addClass("collapsed")
                });
            }
        )
   </script>
}
<h2>@ViewData["Title"]</h2>
<p class="text-success">@ViewData["StatusMessage"]</p>
@if (User.IsSignedIn()) {
<label>
<input type="checkbox" id="cbv" checked/>Invisibles, posts privés</label>
<script>
    $("#cbv").change(function() {
        if (this.checked) {
            $("tr.hiddenpost").removeClass("hidden");
        } else {
            $("tr.hiddenpost").addClass("hidden");
        }
    });
    </script>
<p>
    <a asp-action="Create">@SR["Create a new article"]</a>
</p>
}
<table class="table">
    <tr>
        <th>
            @SR["Title"]
        </th>
        <th>
            aperçu
        </th>
    </tr>
   
@foreach (var group in Model) {
    var title = group.Key.Title;
    string secondclass="";
    var first = group.First();
    string trclass = (first.Visible) ? "visiblepost" : "hiddenpost";
 <tr class="@trclass">
        <td><a asp-action="Details" asp-route-id="@first.Id" class="bloglink">
       <img src="@first.Photo" class="smalltofhol"></a>
           <a asp-action="Title" asp-route-id="@title">
           <markdown>@first.Title</markdown></a>
        </td>
        <td>
            <markdown>@((first.Content?.Length > 120) ? first.Content.Substring(0, 120) + " ..." : first.Content)</markdown>
            <span style="font-size:x-small;">(@first.Author.UserName </span>,
            <span style="font-size:xx-small;">
            posté le @first.DateCreated.ToString("dddd d MMM yyyy à H:mm")
            @if ((first.DateModified - first.DateCreated).Minutes > 0){ 
                @:- Modifié le @first.DateModified.ToString("dddd d MMM yyyy à H:mm")
             })
            </span>
            
   @if (group.Count()>1) {
       <div class="sametitle">
       Au même titre:
       <table> 
          
    @foreach (var item in group.Skip(1)) {
     trclass = ((item.Visible)?"visiblepost":"hiddenpost");

<tr class="@trclass"><td>le @item.DateModified.ToString("dddd d MMM yyyy à H:mm")</td>
<td><markdown>@((item.Content?.Length > 120) ? item.Content.Substring(0, 120) + " ..." : item.Content)</markdown>
</td>
<td> <a asp-action="Details" asp-route-id="@item.Id"  class="btn btn-lg">Details</a>
</td></tr>
    }  </table></div>
    }
        </td>
        <td> 
            <ul class="actiongroup">
                @if (await AuthorizationService.AuthorizeAsync(User, first, new ViewRequirement())) {
                <li>
                    <a asp-action="Details" asp-route-id="@first.Id"  class="btn btn-lg">Details</a>
            </li>
                }
            @if (await AuthorizationService.AuthorizeAsync(User, first, new EditRequirement())) {
            <li><a asp-action="Edit" asp-route-id="@first.Id" class="btn btn-default">@SR["Edit"]</a>
            </li>
            <li><a asp-action="Delete" asp-route-id="@first.Id" class="btn btn-danger">@SR["Delete"]</a>
            </li>
            }
            </ul>
        </td>
    </tr>
}
</table>