twilio-app/twilio/app/assets/javascripts/templates/message-form.html.haml

.message.panel.panel-default.col-md-4{"ng-repeat" => "message in messages", "ng-controller" => "MessageController"}
  %form{"novalidate" => true, "name"=>"message_{{message.id}}_form"}
    .panel-heading.text-center <input placeholder="title" name="title" class="form-control" type="text" ng-model="message.title" required />
    .panel-body
      %span{"ng-show" => "message_{{message.id}}_form.title.$dirty && message_{{message.id}}_form.title.$invalid"} Invalid title
      %span{"ng-show" => "message_{{message.id}}_form.body.$dirty && message_{{message.id}}_form.body.$invalid"} Invalid body
      %span{"ng-show" => "message_{{message.id}}_form.secret.$dirty && message_{{message.id}}_form.secret.$invalid"} Invalid secret
      .form-group
        %label Message Body <input placeholder="body" name="body" class="form-control" type="text" ng-model="message.body" required />
      .form-group
        %label Message Secret <input placeholder="secret" name="secret" class="form-control" type="number" ng-model="message.secret" required />
      .form-group
        %label Created
        {{message.created_at | date:"short"}}
      .form-group
        %label Last Updated
        {{message.updated_at | date:"short"}}
      .form-group
        %label Disabled? <input class="form-control" type="checkbox" ng-model="message.disabled" required />
      .panel.panel-default
        .panel-heading Call Logs
        .panel-body
          .panel.panel-default.call_log{"ng-repeat" => "log in message.call_logs"}
            .panel-heading {{log.number}}
            .panel-body {{log.created_at | date:"short"}}