<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Couch411 | Login</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/semantic-ui/dist/semantic.min.css">
  <script src="semantic-ui/dist/semantic.min.js"></script>
  <link href="./ng-cropper/dist/ngCropper.all.css" rel="stylesheet">
  <script src="./ng-cropper/dist/ngCropper.all.js"></script>
  <script src="./js/picture.js"></script>
  <!--<script src="ng-flow-standalone.js"></script>
  <script src="ng-img-crop.js"></script>
  <link rel="stylesheet" type="text/css" href="ng-img-crop.css"/>-->
</head>
<body ng-app="picture" ng-controller="pictureController" ng-init="printSessionStorage()">
  <h4 class = "text-center"> My Profile </h4>
  <button class="ui button">Follow</button>

  <script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show');
    });
    
    var closemodal = function() { $('#myModal').modal('hide'); };
  </script>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
              <form id = "uploadForm" action="/api/uploadAttempt" method="post" enctype="multipart/form-data">
                <div class="modal-header">
                    <!--<button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>-->
                    <h4 class="modal-title" id="myModalLabel">Upload Profile Picture</h4>
                </div>
                <div class="modal-body">
                    <input type="file" onchange="angular.element(this).scope().onFile(this.files[0])" name="userPhoto" accept="image/*">
                      <button class="btn btn-default" ng-click="preview()">Show preview</button>
                      <button class="btn btn-default" ng-click="scale(200)">Scale to 200px width</button>
                      <label>Disabled <input type="checkbox" ng-model="options.disabled"></label>

                      <br />

                      <div ng-if="dataUrl" class="img-container">
                        <img ng-if="dataUrl" ng-src="{{dataUrl}}" width="300"
                             ng-cropper
                             ng-cropper-show="showEvent"
                             ng-cropper-hide="hideEvent"
                             ng-cropper-options="options">
                      </div>

                      <div class="preview-container">
                        <img ng-if="preview.dataUrl" ng-src="{{preview.dataUrl}}">
                      </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">No Thanks</button>
                    <input type="hidden" value="{{session.sessionID}}" name="sessionID" >
                    <input type="hidden" value="{{cropDim}}" name="cropDim" >
                    <input ng-click="finalCropCheck();" onclick="closemodal();" type="submit" value="Upload Picture" name="submit" class="btn btn-primary">
                </div>
          </form>
        </div>
    </div>
  </div>
  <button class="btn btn-default" ng-click="publishTry()">Make Post</button>
  <button class = "btn btn-primary" ng-click="getMyProfile()"> Get My Profile </button>
  <span>{{myData.changed}}</span>
  <img width="100" height="100" ng-src="{{myData.changed.users.picSRC}}"></img>
</body>