<!-- HTML for the slide in menu. -->
<div class="side-menu-header">
    <img ng-src="{{userPic}}">
    <h2>{{userName}}</h2>
    <h3>{{email}}</h3>
</div>

<div id="aside-content">
    <ul>
        <li><a ng-click="close()" href="#!/about">About</a></li>
        <li><a ng-click="close()" href="#!/affiliates">Affiliates</a></li>
        <li><a ng-click="listButton = !listButton">Lists</a></li>
            <div id="shared-list" ng-show="listButton">
                <ul>
                    <li class="row no-gutter">
                        <div class="col-xs-10 list-item-name" ng-click="switchList('main')">
                            <!-- item name injected here-->
                            My List
                        </div>
                    </li>
                    <li ng-repeat="lists in allLists" class="row no-gutter">
                        <div class="col-xs-8 list-item-name" ng-click="switchList(lists)">
                            <!-- item name injected here-->
                            {{lists.name}}
                        </div>
                        <div class="col-xs-2 list-item">
                            <input id="delete-list-btn" type="image" src="images/icons/android-share.png" width="20" ng-click="shareThisList(lists.listKey, lists.name)"/>
                        </div>
                        <div class="col-xs-2 list-item">
                            <input id="delete-list-btn" type="image" src="images/icons/trash.png" width="20" ng-click="deleteList(lists.listKey)"/>
                        </div>
                    </li>
                    <li class="row no-gutter add-list" ng-show="listButton">
                        <form>
                            <div class="col-xs-9">
                                <input ng-model="newListName" type="text" name="newShareListName" placeholder="Enter New List Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter New List Name'">
                            </div>
                            <div class="col-xs-2">
                                <img alt="add new list" src="images/icons/add1.png" class="add-newList-button" ng-click="addNewList(newListName)"/>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>
        <li><a ng-click="close()" href="#!/settings">Settings</a></li>
        <li id="feedback-icon"><a ng-click="close()" href="mailto:greenlistapp@gmail.com?subject=Feedback">Feedback</a></li>
    </ul>


</div>

<div id="aside-footer">
    <div id="sign-out">
        <a ng-controller="AuthCtrl" ng-click="signOut(); close()">Sign&nbsp;out</a>
    </div>
    <div id="version">
        v1.0
    </div>
</div>
