from Perry import component, pageView, serve, Composite

Homepage = component(pageView, _Inherit = True)
# a pageView is also a component, but inherits different functionality

# Assign page contents
Homepage <= {
  'title': 'Home', # Title of the page 
  'path':'',       # Route on the webserver, no need to include the starting /
  'styles': [bootstrap], # Styles and other components, here we load bootstrap which is included in Extras
  'DOM': pageView.DOM,   # DOM, not yet implemented but worth using in case you want to upgrade to a newer verion of Perry later
  'components': HomepageContents # A ComponentSource with our elements
}

HomepageContents = ComponentSource(
  DIV(
    Label('Hello World!', 'h1'),
    Card(
        Image('Image URL'),
        CardText('Sample Text which has attributes for bootstrap cards', 'p')   
    ),
    Label('Good bye!', 'h1')
  )
)

OurCoolNewElement = DIV(
    Label('Hello, I have custom stuff!', 'h1', id = 'CoolTitle'),
    cclass = 'NewElement'
)
# Let's give it some style
ourCustomStyle = style()
ourCustomStyle <= {
  'author':'HUSKI3',
  'source':'Local-made ;)'
  'ctype':'css',
  'css' : '''
  .NewElement {
    color: white;
    background: black;
  }
  '''}
# And now add it to the components
HomepageContents = ComponentSource(
  DIV(
    Label('Hello World!', 'h1'),
    OurCoolNewElement , # <--- here
    Label('Good bye!', 'h1')
  )
)

Homepage <= {
  ...,
  'styles': [some, styles, ourCustomStyle],
  ...
}

# First we create the component with JQuery, give it a pageView to wrap around (WIP)
js = JQueryEngine(pageView, cid = 'coolscript')
# Now you load in the script, it can either be a string or a read from file
js <= ( open('PerryApp/coolscript.js','r').read() )
# To load it in, you need to add JQueryEngineStrapper to the styles of the page and add the js component to the components
HomepageContents.add( js )

# Serve our pages as a composite collection
serve <= Composite(Homepage, About, OtherPage, debug = True)