const {div, h1, ul, li, a, p, strong, hr} = require('../../modules/tags')
const icon = require('../components/icon.tmpl')
const spinner = require('../components/spinner.tmpl')


// TODO-2 merge with function in `search.tmpl`
const setResult = (set) =>
    [
        a(  // TODO-2 if already in sets, don't show this button
            {
                id: set.entity_id,
                href: '#',
                className: 'add-to-my-sets'
            },
            icon('create'),
            ' Add to My Sets'
        ),
        strong(icon('set'), ' Set'),
        ': ',
        a(
            {href: `/sets/${set.entity_id}`},
            set.name
        ),
        p(set.body),
        a(
            {
                href: `/sets/${set.entity_id}/tree`,
                className: 'view-units',
            },
            icon('unit'),
            ' View Units'
        )
    ]


module.exports = (data) => {
    if(!data.recommendedSets) { return spinner() }
    return div(
        {id: 'recommended-sets'},
        h1('Recommended Sets'),
        ul(
            data.recommendedSets.map(set => li(setResult(set)))
        ),
        hr(),
        a({href: '/search?mode=as_learner'}, icon('search'), ' Search Sets')
    )
}

@@ -8,16 +8,20 @@
 div, h1,
+ h3,
  ul, li,
@@ -30,16 +30,8 @@
 , p,
- strong,
  hr%7D
@@ -171,55 +171,8 @@
 )%0A%0A%0A
-// TODO-2 merge with function in %60search.tmpl%60%0A
 cons
@@ -481,137 +481,19 @@
     
-strong(icon('set'), ' Set'),%0A        ': ',%0A        a(%0A            %7Bhref: %60/sets/$%7Bset.entity_id%7D%60%7D,%0A            set.name%0A        
+h3(set.name
 ),%0A 

Update styling