<?xml version="1.0" encoding="utf-8"?>
<rules xmlns="http://namespaces.plone.org/diazo"
       xmlns:css="http://namespaces.plone.org/diazo/css"
       xmlns:xhtml="http://www.w3.org/1999/xhtml"
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
       xmlns:xi="http://www.w3.org/2001/XInclude">


  <!-- Include barceloneta's backend.xml for backend theming. -->
  <xi:include href="++theme++barceloneta/backend.xml"><xi:fallback /></xi:include>
  <!--
    The backend.xml it self uses the following rules condition, to exclude the frontend
    If you want to include anything just for the backend, you can do the same,
    by uncommenting the BACKEND ONLY BLOCK.
  -->
  <!-- BACKEND ONLY BLOCK -->
  <!--
  <rules css:if-not-content="body.viewpermission-view, body.viewpermission-none">
  </rules>
  -->

  <!-- FRONTEND ONLY BLOCK -->
  <rules css:if-content="body.viewpermission-view, body.viewpermission-none">
    <!--<theme href="home.html" css:if-content=".section-front-page" />-->
    <theme href="index.html" />
    <notheme css:if-not-content="#visual-portal-wrapper" />

    <!-- ### REMOVE THIS RULE AFTER ACTIVATING YOUR OWN RULES BELOW ### -->
    <!-- Copy over the whole body content of Plone -->
    <!-- <replace theme-children="/html/body" content-children="/html/body" /> -->

    <rules css:if-content="#portal-top">
      <!-- Attributes -->
      <copy attributes="*" css:theme="html" css:content="html" />

      <!-- Base tag -->
      <before css:theme="title" css:content="base" />

      <!-- Title -->
      <replace css:theme="title" css:content="title" />

      <!-- Replace Plone Viewport with custom Viewport -->
      <replace content="/html/head/meta[@name='viewport']">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </replace>

      <!-- Pull in Plone Meta -->
      <after css:theme-children="head" css:content="head meta" />

      <!-- Don't use Plone icons, use the theme's -->
      <drop css:content="head link[rel='apple-touch-icon']" />
      <drop css:content="head link[rel='shortcut icon']" />

      <!-- drop the theme stylesheets -->
      <drop theme="/html/head/link[rel='stylesheet']" />

      <!-- Pull in CSS Plone stylesheets for loged-in users -->
      <after
        css:theme-children="head"
        css:content="head link"
        css:if-not-content="html > body.userrole-anonymous"
        />

      <!-- Add theme stylesheets here, to have them at the bottom of all stylesheets -->
      <!--
      <after theme-children="/html/head">
        <link rel="stylesheet" href="++theme++{{{ theme.normalized_name }}}/assets/css/main.css" />
      </after>
      -->

      <!-- Pull in Plone javascript for loged-in users -->
      <!--
        Make sure that the backend.xml you are using, is not pulling the content scripts again!
        Using it twice cause the scripts being pulled twice and could lead to JS errors.
        See https://github.com/plone/plonetheme.barceloneta/issues/158

        You can pull the scripts either inside or outside of a BACKEND ONLY BLOCK
        depending on, if you need the Plone scripts in your frontend or not.
      -->
      <!-- <after css:theme-children="head" css:content="head script" /> -->
      <after
        theme-children="/html/head"
        content="/html/head/script"
        />
      <!-- <after
        theme-children="/html/head"
        content="/html/head/script"
        css:if-not-content="html > body.userrole-anonymous"
        /> -->

      <!--
        Add theme javascripts here, to have them at the bottom of all javascripts.
        You could also add them to the bottom of the body tag, if you want.
      -->
      <!--
      <after theme-children="/html/head">
        <script src="++theme++{{{ theme.normalized_name }}}/assets/js/main.js"></script>
      </after>
      -->

      <after theme-children="/html/head">
        <script>
            require = undefined;
            define = undefined;
        </script>
      </after>
    </rules>

    <!-- Copy over the id/class attributes on the body tag. This is important for per-section styling -->
    <copy attributes="*" css:content="body" css:theme="body" />

    <!-- Copy anonymous actions like the login link -->
    <before
      theme="/html/body"
      css:content-children="#portal-personaltools-wrapper"
      css:if-not-content=".ajax_load"
      css:if-content=".userrole-anonymous"
      />

    <!-- ### ACTIVATE OR ADD YOUR OWN RULES BELOW ACCORDING TO YOUR THEME ### -->

    <!-- Copy the Plone logo including the surounding link -->
    <!-- <replace
      css:content='#portal-logo'
      css:theme="#logo"
      /> -->

    <!-- Copy global nav (portal tabs) -->
    <!-- <replace css:theme-children=".navbar-nav" css:content-children="navbar-nav" /> -->

    <!-- Copy breadcrumb bar -->
    <!-- <replace css:content="#viewlet-above-content" css:theme="#above-content" /> -->

    <!-- Copy Alert message -->
    <!-- <replace css:theme-children="#global_statusmessage" css:content-children="#global_statusmessage" /> -->

    <!-- Copy Plone navigation portlet -->
    <!-- <replace
      css:content="#portal-column-one .portlet.portletNavigationTree"
      css:theme-children='#sidebar'
      /> -->

    <!-- Copy all portal-column-one portlets but not portletNavigationTree into the sidebar -->
    <!-- <after
      css:content="#portal-column-one .portletWrapper > *:not(.portletNavigationTree)"
      css:theme-children='#sidebar'
      /> -->

    <!-- Copy all portal-column-two portlets into the same sidebar-->
    <!-- <after
      css:content="#portal-column-two .portletWrapper > *"
      css:theme-children='#sidebar'
      /> -->

    <!-- Copy Document Content -->
    <!-- <replace
      css:content-children="#content"
      css:theme-children="main"
      /> -->

    <!-- Copy footer -->
    <!-- <replace
      css:content-children="footer"
      css:theme-children="footer"
      /> -->


    <!-- Drop icons in footer -->
    <!-- <drop css:theme="#footer .icons" /> -->

  </rules>
</rules>
