@{
    ViewData["Title"] = "Activities";
    var colors = new Dictionary<string, string>()
{
        { UserActionStatus.Unread.ToString(), "red" },
        { UserActionStatus.Read.ToString(), "green"},
        { UserActionStatus.Pinned.ToString(), "blue"},
    };
}

@model ActivitiesPaginationViewModel

<div class="tab-pane fade in active">
    @foreach (var action in Model.Activities)
    {
        @if (action.Action == UserActionType.Follow)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> started following
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>@action.FollowerUsername</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.Followed)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> was followed by
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>@action.FollowerUsername</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.Unfollow)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> unfollow
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>@action.FollowerUsername</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.Unfollowed)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> was unfollowed by
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>@action.FollowerUsername</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.EditPersonalData)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> update his/her personal information
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.ChangeCoverImage)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> has changed his/her cover picture
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="thumbnail">
                            <img src=@action.CoverImageUrl alt="Uploaded photo">
                        </a>
                    </div>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.ChangeProfilePicture)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> has changed his/her profile picture
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="thumbnail">
                            <img src=@action.ProfileImageUrl alt="Uploaded photo">
                        </a>
                    </div>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.CreatePost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> create a new blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.LikeOwnPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> like his/her own blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.LikePost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> like
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>
                                @action.FollowerUsername
                            </b>
                        </a> blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.LikedPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a> was liked by
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>
                                @action.FollowerUsername
                            </b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.UnlikeOwnPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> unlike his/her own blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.UnlikePost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> unlike
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>
                                @action.FollowerUsername
                            </b>
                        </a> blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.UnlikedPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a> was unliked by
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>
                                @action.FollowerUsername
                            </b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.DeleteOwnPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> delete his/her own blog post
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.DeletePost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> delete
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>@action.FollowerUsername</b>
                        </a> blog post
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.DeletedPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>@action.PersonUsername</b>
                        </a> blog post was deleted by
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>@action.FollowerUsername</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                </div>
                @if (User.Identity.Name == action.ApplicationUser.UserName)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.EditPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> edit
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>
                                @action.FollowerUsername
                            </b>
                        </a> blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.EditedPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a> was edited by
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.FollowerUsername">
                            <b>
                                @action.FollowerUsername
                            </b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }

        @if (action.Action == UserActionType.EditOwnPost)
        {
            <div class="media activity-item">
                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername" class="pull-left">
                    <img src=@action.ProfileImageUrl alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                    <p class="activity-title">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@action.PersonUsername">
                            <b>
                                @action.PersonUsername
                            </b>
                        </a> edit his/her own blog
                        <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                            <b>post</b>
                        </a>
                    </p>
                    @if (User.Identity.Name == action.ApplicationUser.UserName)
                    {
                        <p>
                            <span style="font-size: 14px">Status: </span>
                            <span>
                                <b id="@action.Id" style="color: @colors[action.ActionStatus.ToString()]; text-transform: uppercase">
                                    @action.ActionStatus.ToString()
                                </b>
                            </span>
                        </p>
                    }
                    <small class="text-muted">@action.ActionDate.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</small>
                    <div class="activity-attachment">
                        <h4>
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@action.PostId">
                                @action.PostTitle
                            </a>
                        </h4>
                        <div class="well well-sm">
                            @Html.Raw(action.PostContent)
                        </div>
                    </div>
                </div>
                @if (User.Identity.Name == action.PersonUsername)
                {
                    <div class="btn-group pull-right activity-actions">
                        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-th"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a asp-controller="Profile" asp-action="DeleteActivityById" asp-route-username="@User.Identity.Name" asp-route-activityId="@action.Id">I don't want to see this</a></li>
                            @foreach (var status in Enum.GetValues(typeof(UserActionStatus)))
                            {
                                <li>
                                    <a onclick="changeActionStatus('@action.Id', '@action.ApplicationUser.UserName', '@status')">
                                        @status.ToString()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>
        }
    }
    <div class="row" style="text-align: center">
        @Html.PagedListPager((IPagedList)Model.Activities,
                page => Url.Action("Index", "Profile",
        new { username = Model.Username, page = page }),
        PagedListRenderOptions.OnlyShowFivePagesAtATime)
    </div>
</div>