<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="bg_SlackFeedController">

    <!-- Handling Page Load -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- Setting up Variables -->
    <aura:attribute name="slackChannelWrapper" type="bg_SlackUtils.bg_SlackChannelWrapper"/>

    <!-- Spinner -->
    <lightning:spinner aura:id="bg-spinner" size="small" />


    <!-- Page Content -->
    <div class="bg-main_content">

        <div class="bg-slack_header">
            <aura:if isTrue="{!v.slackChannelWrapper.channelId != null}">
                <h2 class="slds-text-heading_medium">#{!v.slackChannelWrapper.channelName}</h2>
                <aura:set attribute="else">
                    <h2 class="slds-text-heading_medium">No Channel Found</h2>
                </aura:set>
            </aura:if>
        </div>

        <div class="bg-slack-bar">
            <div class="bg-slack_title_square bg-color_slack_purple"></div>
            <div class="bg-slack_title_square bg-color_slack_green"></div>
            <div class="bg-slack_title_square bg-color_slack_blue"></div>
            <div class="bg-slack_title_square bg-color_slack_yellow"></div>
            <div class="bg-slack_title_square bg-color_slack_pink"></div>
        </div>

        <div class="bg-slack_sub_header">
            <aura:if isTrue="{!v.slackChannelWrapper.channelId != null}">
                The channel was last refreshed on the {!v.slackChannelWrapper.formattedLastRefreshDate} at {!v.slackChannelWrapper.formattedLastRefreshTime}
                <aura:set attribute="else">
                    No channel information to display.
                </aura:set>
            </aura:if>
        </div>

        <div class="bg-slack_body">
            <div class="slds-grid slds-wrap">
                <aura:if isTrue="{!v.slackChannelWrapper.actions != null}">
                    <aura:iteration items="{!v.slackChannelWrapper.actions}" var="action">
                        <div class="slds-col slds-size_12-of-12 bg-slack_post_cluster">
                            <div class="bg-text_break">
                                <span class="bg-text_bold">{!action.formatDate}</span>
                            </div>
                        </div>
                        <aura:iteration items="{!action.messages}" var="message">

                            <div class="slds-col slds-small-size slds-size_12-of-12 bg-slack_message">
                                <div class="bg-slack_message_main">
                                    <div class="bg-slack_photo_container">
                                        <div class="bg-slack_photo">
                                            <img src="{!message.avatarUrl}" alt="slack_avatar" class="test" />
                                        </div>
                                    </div>
                                    <div class="bg-slack_message_container">
                                        <div class="bg-slack_message_content">
                                            <div class="bg-slack_body_name slds-text-body_regular">
                                                <span class="bg-text_bold">{!message.realName + ' '}</span><span class="bg-slack_post_date">{!message.formattedTime}</span>
                                            </div>
                                            {!message.message}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </aura:iteration>

                    </aura:iteration>
                    <aura:set attribute="else">
                        <div class="slds-col slds-size_12-of-12 bg-no_messages">
                            No messages to display.
                        </div>
                    </aura:set>
                </aura:if>
            </div>
        </div>

        <div class="bg-slack-bar">
            <div class="bg-slack_title_square bg-color_slack_purple"></div>
            <div class="bg-slack_title_square bg-color_slack_green"></div>
            <div class="bg-slack_title_square bg-color_slack_blue"></div>
            <div class="bg-slack_title_square bg-color_slack_yellow"></div>
            <div class="bg-slack_title_square bg-color_slack_pink"></div>
        </div>

        <div class="bg-slack_footer">
            Put some information here in a label so that it can be changed. Alternatively we can pull through a "channel description" from the channel object.
        </div>
    </div>

</aura:component>