(function() {
  var allowedSlots = {
    'settings.sso_panel': true,
    'settings.totp_panel': true,
    'settings.audit_panel': true,
    'settings.billing_panel': true,
    'wizard.protocol_cards.graphql': true,
    'wizard.protocol_cards.grpc': true,
    'wizard.protocol_cards.soap': true,
    'wizard.protocol_cards.websocket': true,
  };

  var handlers = Object.create(null);

  function noop() {}

  function isAllowed(slotId) {
    return !!allowedSlots[slotId];
  }

  function register(slotId, render) {
    if (!isAllowed(slotId) || typeof render !== 'function') {
      return false;
    }
    handlers[slotId] = render;
    return true;
  }

  function renderInto(target, slotId, context) {
    if (!(target && slotId && isAllowed(slotId))) {
      return;
    }
    var handler = handlers[slotId] || noop;
    handler(target, context || {});
  }

  function renderAll(root, context) {
    var scope = root || document;
    scope.querySelectorAll('[data-slot]').forEach(function(target) {
      renderInto(target, target.getAttribute('data-slot'), context);
    });
  }

  function knownSlots() {
    return Object.keys(allowedSlots);
  }

  window.CrankUiSlots = {
    isAllowed: isAllowed,
    knownSlots: knownSlots,
    register: register,
    renderAll: renderAll,
    renderInto: renderInto,
  };
}());