<div class="home-container">

  <div class="panel panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="!#conversation" class="quick-create-tab" aria-controls="conversate" role="tab" data-toggle="tab"><i class="fa fa-comments-o" aria-hidden="true"></i> Start a conversation</a></li>
        <li role="presentation"><a href="!#conversation" class="quick-create-tab" aria-controls="conversate" role="tab" data-toggle="tab"><i class="fa fa-comments-o" aria-hidden="true"></i> Start a group</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div ng-hide="vm.message_active" ng-click="vm.message_active = true">
        <input type="text" class="form-control" placeholder="Start typing your message">
      </div>
      <div ng-show="vm.message_active" class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="conversation">
          <div class="media">
            <div class="media-left">
              <div class="image-thing"><i class="fa fa-user fa-3x" aria-hidden="true"></i></div>
            </div>
            <div class="media-body">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Contact name(s) or email(s)">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Subject (optional)">
              </div>
              <div class="form-group">
                <textarea name="name" class="form-control" rows="8" cols="80" placeholder="Type your message"></textarea>
                <br>
                <div class="pull-right">
                  <a href="" class=""><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></a>
                  <button type="button" name="button" class="btn btn-default" ng-click="vm.message_active = false">Send</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <table class="table">
    <tbody>
        <td>Drew Warren</td>
        <td><button class="btn btn-default">Save Contact</button></td>
        <td><strong>Tomorrow's Agenda</strong> -It's going to be a long day</td>
        <td>7:00 pm</td>
      </tr>
      <tr>
        <td>Jacob Jones</td>
        <td></td>
        <td><strong>Family get-together</strong> -I'm super excited!</td>
        <td>6:00 pm</td>
      </tr>
      <tr>
        <td>Sharen O'Neal</td>
        <td></td>
        <td><strong>Friday Lunch</strong> -Yum!</td>
        <td>Jun 29</td>
      </tr>
      <tr>
        <td>Jessica Maizer</td>
        <td><button class="btn btn-default">Save Contact</button></td>
        <td><strong>Vacation</strong> -Cruise to Hawaii?</td>
        <td>Jun 10</td>
      </tr>
    </tbody>
  </table>

  <button ng-click="vm.showSettings = !vm.showSettings">Settings</button>
  <div ng-if="vm.showSettings">
    <label>Service:</label> <input type="text" ng-model="vm.settings.service" placeholder="ex: mailgun.org">
    <br>
    <label>API Key:</label> <input type="text" ng-model="vm.settings.apiKey" placeholder="ex: key-xxxxxxxxxxxx">
    <br>
    <label>SMTP Username:</label> <input type="text" ng-model="vm.settings.auth.user" placeholder="ex: johndoe">
    <br>
    <label>SMTP Password:</label> <input type="text" ng-model="vm.settings.auth.pass" placeholder="ex: ************">
    <br>
    <label>SMTP Domain:</label> <input type="text" ng-model="vm.settings.auth.domain" placeholder="ex: example.com">
  </div>
</div>

<!-- <div class="white-well">
</div> -->