angular.module("noteWrangler")
// $sce : Strict Contextual Escaping service.
  .directive('nwCard', function ($sce) {
    return {
      /* Runs after the directive has been compiled is is ready. Best spot to do
      any DOM manipulation or logic functionality for a directive.

      - "element" is the outermost element for the directive (div.card in nw-card.html)
      - "attrs" are the attributes set on "element": here "header" and "description"
       */
      link: function (scope, element, attrs) {
        scope.body = $sce.trustAsHtml(markdown.toHTML(scope.body));
        element("div.card").on("click", function () {
          element("div.card p").toggleClass("hidden");
        });
      },
      restrict: "E", // "E" is for Element.
      /* By default, directives have "scope: false": they inherit from their
      parents, so setting properties on the scope actually sets them on the
      parent scope. Setting the scope to a non empty value creates an isolated
      scope for the child... so it no longer has access to the parent scope.

      So we pass the required parts of the parent scope to the directive in the
      HTML attributes (see notes.html). But then we can't use the inline
      controller, the directive needs to know it can receive a header from the
      notes.html template.
       */
      scope: {
        // "@" means we'll be passing header as a (1-way) string.
        // Also available: "=" (2-way binding, expression brackets no longer
        // needed around note.header) and "&".
        header: "=",
        icon: "=",
        image: "=",
      },
      templateUrl: "templates/directives/nw-card.html",
    }
  });