local p = {}



function p.hidden(frame)

    

    local id = mw.getCurrentFrame():getParent().args'id' or ""

    local mode = mw.getCurrentFrame():getParent().args'mode' or "right"

    local expandSymbol = mw.getCurrentFrame():getParent().args'expand-symbol' or "⊞"

    local collapseSymbol = mw.getCurrentFrame():getParent().args'collapse-symbol' or "⊟"

    local expandText = mw.getCurrentFrame():getParent().args'expand-text' or ""

    local collapseText = mw.getCurrentFrame():getParent().args'collapse-text' or ""

    local initialStateExpanded = mw.getCurrentFrame():getParent().args'expanded' or "false"

    if mw.getCurrentFrame():getParent().args'expand-symbol' == "none" then

        expandSymbol = expandText

    else

    	expandSymbol = expandSymbol .. expandText

    end

    if mw.getCurrentFrame():getParent().args'collapse-symbol' == "none" then

        collapseSymbol = collapseText

    else

		collapseSymbol = collapseSymbol .. collapseText

    end

    

    -- default is content collapsed

    local contentState = " mw-collapsed" -- class to collapse content at start

    local collapseSymbolState = " mw-collapsed"

    local expandSymbolState = ""

    if initialStateExpanded  == "true" or initialStateExpanded  == "yes" then

       contentState = ""

       collapseSymbolState =  ""

       expandSymbolState = " mw-collapsed" 

    end

    	

	

    -- collapsible element containing the EXPAND SYMBOL and/or text

    --local expandSymbolString = '<td class="nomobile" style="padding:0 0 0.0em 0;">'  -- mobile exclusion no longer necessary

    local expandSymbolString = '<td style="padding:0 0 0.0em 0;">' 

                .. '<div class="mw-collapsible' .. expandSymbolState .. '" id="mw-customcollapsible-expandSymbol' .. id .. '">'

                .. '<div class="mw-collapsible-content mw-customtoggle-expandSymbol' .. id .. '">'

                .. '<div class="mw-customtoggle-myClade' .. id 

                ..             ' mw-customtoggle-collapseSymbol' .. id 

                ..             ' mw-customtoggle-expandSymbol' .. id 

                ..    '" style="font-size:100%;">' .. expandSymbol .. '</div>'

                .. '</div></div></td>'

    

    -- collapsible element containing the CLADE CONTENT 

    local clade = require( 'Module:Clade' )

    local contentString = '<td style="padding:0;" class="clade-interactive" >'

                .. '<div class="mw-collapsible' .. contentState .. '" id="mw-customcollapsible-myClade' .. id .. '>'

                .. '<div class="mw-collapsible-content mw-customtoggle-NOT_ON_CONTENT" >' -- don't toggle on the content

                

                .. '\n' .. clade.main(frame)  -- important to start wikitext tables on new line

                .. '</div></div></td>'

    

    -- collapsible element containing the COLLAPSE SYMBOL and/or text

    --local collapseSymbolString = '<td class="nomobile" style="padding:0 0 0.0em 0;">' -- mobile exclusion no longer necessary

    local collapseSymbolString = '<td style="padding:0 0 0.0em 0;">'

                .. '<div class="mw-collapsible' .. collapseSymbolState .. '" id="mw-customcollapsible-collapseSymbol' .. id .. '">'

                .. '<div class="mw-collapsible-content mw-customtoggle-collapseSymbol' .. id .. '" >'

                .. '<span class="mw-customtoggle-expandSymbol' .. id 

                            .. ' mw-customtoggle-myClade' .. id 

                            .. ' mw-customtoggle-collapseSymbol' .. id 

                            .. ' " style="font-size:100%;" >' .. collapseSymbol .. '</span>'

                            .. '</div></div></td>'





	local tableStyle = frame.args.style or ""

	if tableStyle == '{{{style}}}' then tableStyle = "" end

 	local cladeString = '<table style="border-spacing:0;margin:0;'..tableStyle ..'"><tr>'

    cladeString = cladeString .. expandSymbolString 

    if mode == "left" then

    	cladeString = cladeString .. collapseSymbolString

    end

    cladeString = cladeString .. contentString 

    if mode == "right" then

    	cladeString = cladeString .. collapseSymbolString

    end

    -- Note: if we want collapse string left and right it needs an extra element with a different id

    cladeString = cladeString ..  '</tr></table>'





return p.templateStyle( frame, "Clade hidden/styles.css" ) .. cladeString

end



function p.toggle(frame)

	

	if 1==2 then return 'some text' end

	

	--local toggleSymbol = 'toggle all'

	local toggleSymbol = mw.getCurrentFrame():getParent().args'button' or ""



	local toggleString = '<div class="'

                

    local i=0

    while 	i < 20 do  -- limit on number of toggle elements controlled by the trigger button

    	i = i + 1 -- so we start with 1

		local target = mw.getCurrentFrame():getParent().args'id'..tostring(i)] 

	    

	    -- add classes for the three elements of each target: expand symbol, collapse symbol and contents

	    if target ~= nil then

            toggleString = toggleString .. ' mw-customtoggle-myClade' .. target 

                ..             ' mw-customtoggle-collapseSymbol' .. target 

                ..             ' mw-customtoggle-expandSymbol' .. target 

        end

    end

  

 

 toggleString = toggleString  ..  '">' .. toggleSymbol .. '</div>'



  return toggleString

end





-- <templatestyles src="Clade hidden/styles.css"></templatestyles>

function p.templateStyle( frame, src )

   return frame:extensionTag( 'templatestyles', '', { src = src } );

end



return p