Untitled

<!DOCTYPE html>
<html lang="pt-br" ng-app="minhasSeries">

<head>
  <meta charset="utf-8">
    <title>Minhas Séries</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="lib/angular/angular.min.js"></script>
    <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/minhasSeriesCtrl.js"></script>
</head>

<body ng-controller="minhasSeriesCtrl">

  <div class="container">

    <div class="masthead">
      <nav>
        <ul class="nav nav-justified">
          <li><a href="#home" ng-click="reinicializaSeriesPesquisadas()">Home</a></li>
          <li><a href="#perfil" ng-click="perfil = !perfil">Séries do Meu Perfil</a></li>
          <li><a href="#watchlist" ng-click="watchlist = !watchlist">Séries do Meu Watchlist</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
    </div> <!--masthead-->

    <div id="home"class="jumbotron">
      <h1>{{app}}</h1>
      <input class="form-control" type="text" ng-model="nome"" placeholder="Nome da série">
      <button class="btn btn-lg  btn-primary" ng-click="procuraSerie(nome)" ng-disabled="!nome">Pesquisar</button>
    </div>

    <div ng-repeat="serie in seriesPesquisadas" class="col-sm-6">
      <h4>{{serie.Title}}</h4>
      <img ng-src="{{serie.Poster !== 'N/A' ? serie.Poster: 'img/foto.png'}}" alt="...">
      <button class="btn btn-success" ng-click="adicionaSerieAoPerfil(serie)">Adicionar ao Perfil</button>
      <button class="btn btn-success" ng-click="adicionaSerieAoWatchlist(serie)">Adicionar ao Watchlist</button>
    </div>

    <div id="perfil" ng-init="perfil = false" ng-show="perfil" class="col-sm-6">
      <h2>Séries do Meu Perfil</h2>
      <div ng-repeat="serie in seriesPerfil" class="col-sm-6">
        <button class="btn btn-danger" ng-click="removeSeriePerfil(serie)">Remover Série</button>
        <h6>{{serie.Title}}</h6>
        <a href="#myModal{{$index}}" data-toggle="modal"><img src="{{serie.Poster !== 'N/A' ? serie.Poster: 'img/foto.png'}}" title="informações" alt="..."/></a>


        <div id="myModal{{$index}}" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{serie.Title}}</h4>
              </div>

              <div class="modal-body">
                <p>Informações da série</p>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
              </div>

              </div>
            </div>
          </div> <!--myModa-->

      </div>
    </div> <!--Séries do Meu Perfil-->


    <div id="watchlist" ng-init="watchlist = false" ng-show="watchlist" class="col-sm-6">
      <h2>Séries do Meu Watchlist</h2>
      <div ng-repeat="serie in seriesWatchlist" class="col-sm-6">
        <button class="btn btn-success" ng-click="adicionaSerieAoPerfil(serie)">Adicionar ao Perfil</button>
        <h6>{{serie.Title}}</h6>
        <img ng-src="{{serie.Poster !== 'N/A' ? serie.Poster: 'img/foto.png'}} " alt="...">
      </div>
    </div>

  </div> <!-- div container-->

</body>

</html>