angular.module('app', [])
  .controller('mainController', function ($scope) {
    $scope.data = [
      { title: 'modal 1',
        isVisible: false,
        content: 'content 1'
      },
      { title: 'modal 2',
        isVisible: false,
        content: 'content 2'
      }
    ]

    $scope.openModal = function (index) {
      $scope.data[index].isVisible = true;
    }
  })
  .component('modal', {
    template: `
      <div class="modal" ng-class="{'is-active': $ctrl.isActive}">
        <div class="modal-background" ng-click="$ctrl.isActive = false"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">{{ $ctrl.title }}</p>
            <button class="delete" ng-click="$ctrl.isActive = false"></button>
          </header>
          <section class="modal-card-body">
            <div ng-transclude="content"></div>
          </section>
        </div>
      </div>
    `,
    transclude: {
      content: 'modalContent'
    },
    bindings: {
      isActive: '=',
      title: '<'
    }
  })