admin.html

<section class="admin" ng-class="{'shoved': siteNavService.navOpen}">
  <ul class="collapsible popout" data-collapsible="expandable">
    <li>
      <div class="collapsible-header active"><i class="material-icons">verified_user</i>Accounts</div>
      <div class="collapsible-body">
        <div class="twitter-login-button">
          <table class="hoverable centered">
            <thead>
              <tr>
                  <th>Account Name</th>
                  <th>Authenticated</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>
                  <i ng-if="twitterAccount.user_auth">
                    {{twitterAccount.screen_name}}
                  </i>
                  <i ng-if="twitterAccount.url">
                    <a ng-href= {{twitterAccount.url}}>Please authenticate with Twitter</a>
                  </i>
                </td>


                <td><i class="material-icons good" ng-if="twitterAccount.user_auth">done</i><i class="material-icons bad" ng-if="!twitterAccount.user_auth">error</i></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </li>
    <li>
      <div class="collapsible-header active"><i class="material-icons">assignment</i>Rules</div>
      <div class="collapsible-body" style="padding: 20px;">
        <div class="clearfix"></div>
        <button ng-click="showAddForm()" class="pull-right btn btn-teal add-rule"><i class="material-icons add">add</i> <span>Add New Rule</span></button>
        <div class="clearfix"></div>
        <h5 ng-show="rules.length === 0" style="font-size: 15px;">No rules currently set.</h5>
        <ul class="collapsible" data-collapsible="accordion" ng-show="rules.length > 0">
          <rule ng-repeat="rule in rules" ruleset="rule"></rule>
        </ul>
      </div>
    </li>
    <li>
      <div class="collapsible-header active"><i class="material-icons">message</i>Tweets</div>
      <div class="collapsible-body" ng-show="selectedMessage !== ''">
        <table class="hoverable centered tweet-table">
          <thead>
            <tr>
                <th>Select</th>
                <th>Tweet ID</th>
                <th>Account Name</th>
                <th>Tweet (truncated)</th>
                <th>Date Tweeted</th>
                <th>Replied?</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="tweet in tweets track by $index">
              <td><p><input ng-if="!tweet.replied" ng-model="tweet.selected" type="checkbox" id="test{{$index}}" /><label for="test{{$index}}"></label></p></td>
              <td>{{tweet.tweetId}}</td>
              <td><a target="_blank" href="{{tweet.profileUrl}}"><img ng-src="{{tweet.profileImageUrl}}">{{tweet.accountName}}</a></td>
              <td><a href="{{tweet.tweetUrl}}" ng-bind="tweet.tweetContent"></a></td>
              <td>{{tweet.dateTweeted}}</td>
              <td><i ng-show="tweet.replied" class="fa fa-times" style="color: red; font-size: 20px;"></i><i ng-show="tweet.replied" class="material-icons" style="color: green;">done</i></td>
            </tr>
          </tbody>
        </table>

        <div class="sendRepliesButton">
          <button style="margin: 20px;" ng-click="sendReplies()" class="btn teal waves-effect pull-right">Send Replies</button>
        </div>

        <div class="clearfix"></div>
      </div>
    </li>
  </ul>
</section>

<div class="addform z-depth-1" ng-show="formShowing"
style="
position: fixed;
top: 40%;
left: 50%;
width: 300px;
height: 150px;
margin-left: -150px;
margin-top: -75px;
background: #FFFFFF;
padding: 20px;">

  <div class="input-group">
    <label>Enter A Rule Name</label>
    <input type="text" ng-model="newRuleName">
    <button class="btn" ng-click="addRule(newRuleName)">Create</button>
    <button class="btn" ng-click="hideAddForm()">Cancel</button>
  </div>
</div>