{{/** WIP - Beta **/}}
{{template "base/head" .}}
    <div class="pages"> 
        <section style="height:auto" class="pages head">
            <div class="ui link cards explore-card top">
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Heading</div>
                        <div class="explore-card meta">
                            <a>Date if needed</a>
                        </div>
                        <div class="explore-card description">
                            Description about the component
                        </div>
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Heading</div>
                        <div class="explore-card meta">
                            <a>Date if needed</a>
                        </div>
                        <div class="explore-card description">
                            Description about the component
                        </div>
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Heading</div>
                        <div class="explore-card meta">
                            <a>Date if needed</a>
                        </div>
                        <div class="explore-card description">
                            Description about the component
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <h2 class="ui container ex-search">
            <i style="font-size:.9em" class="menu-icon octicon">🔍</i>
            Search more than <strong>{{.Total}}</strong> repositories
        </h2>
        <div class="ui container center">
            <form class="ui form" action="{{AppSubURL}}/explore/repos" method="get">
                <div class="ui fluid action input">
                    <input type="text" name="q" placeholder="Search Gitote" required autofocus>
                    <button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
                </div>
            </form>
        </div>

        <div style="margin-top:3em" class="feature alternate ui stripe vertical">
            <div class="ui three column center aligned divided relaxed stackable grid container">
                <div class="row">
                    <div style="margin-top:10px" class="column">
                        <h2 class="ui icon header">
                            <a class="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubURL}}/explore/repos">
                                <i class="explore-card icon menu-icon octicon">📁</i>&nbsp; {{.i18n.Tr "explore.repos"}}
                            </a>
                        </h2>
                    </div>
                    <div style="margin-top:10px" class="column">
                        <h2 class="ui icon header">
                            <a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubURL}}/explore/users">
                                <i class="explore-card icon menu-icon octicon">👦</i>&nbsp; {{.i18n.Tr "explore.users"}}
                            </a>
                        </h2>
                    </div>
                    <div style="margin-top:10px" class="column">
                        <h2 class="ui icon header">
                            <a class="{{if .PageIsExploreOrganizations}}active{{end}} item" href="{{AppSubURL}}/explore/organizations">
                                <i class="explore-card icon menu-icon octicon">🏢</i>&nbsp; {{.i18n.Tr "explore.organizations"}}
                            </a>
                        </h2>
                    </div>
                </div>
            </div>
        </div>

        <h1 class="ui container center ex-head">Trending</h1>
        <section style="background-color:#fff;height:auto" class="pages head">
            <div class="ui link cards explore-card top">
                <div class="card explore-card card">
                    <div class="content">
                        <div class="explore-card title">Repo Name</div>
                        <div class="explore-card description">
                            Description about the Repo
                        </div>
                    </div>
                    <div class="extra content explore-card extra">
                        <i class="star icon"></i>121 Stars
                        <span class="explore-card seperator"></span>
                        <i class="fork icon"></i>8 Forks
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="content">
                        <div class="explore-card title">Repo Name</div>
                        <div class="explore-card description">
                            Description about the Repo
                        </div>
                    </div>
                    <div class="extra content explore-card extra">
                        <i class="star icon"></i>121 Stars
                        <span class="explore-card seperator"></span>
                        <i class="fork icon"></i>8 Forks
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="content">
                        <div class="explore-card title">Repo Name</div>
                        <div class="explore-card description">
                            Description about the Repo
                        </div>
                    </div>
                    <div class="extra content  explore-card extra">
                        <i class="star icon"></i>121 Stars
                        <span class="explore-card seperator"></span>
                        <i class="fork icon"></i>8 Forks
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="content">
                        <div class="explore-card title">Repo Name</div>
                        <div class="explore-card description">
                            Description about the Repo
                        </div>
                    </div>
                    <div class="extra content explore-card extra">
                        <i class="star icon"></i>121 Stars
                        <span class="explore-card seperator"></span>
                        <i class="fork icon"></i>8 Forks
                    </div>
                </div>
            </div>
        </section>
        
        <h1 class="ui container center ex-head">Events</h1>
        <section style="background-color:#fff;height:auto" class="pages head">
            <div class="ui link cards explore-card top">
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Event Name</div>
                        <div class="explore-card meta">
                            <a>Sep 15 - 16, 2018 • Online</a>
                        </div>
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Event Name</div>
                        <div class="explore-card meta">
                            <a>Sep 15 - 16, 2018 • Online</a>
                        </div>
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Event Name</div>
                        <div class="explore-card meta">
                            <a>Sep 15 - 16, 2018 • Online</a>
                        </div>
                    </div>
                </div>
                <div class="card explore-card card">
                    <div class="image">
                        <img class="explore-card mobile" src="https://assets-cdn.github.com/images/modules/explore/events/hacktoberfest-bg.png">
                    </div>
                    <div class="content">
                        <div class="explore-card title">Event Name</div>
                        <div class="explore-card meta">
                            <a>Sep 15 - 16, 2018 • Online</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{template "base/footer_content" .}}
    <div>
{{template "base/footer" .}}