<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>NapTale - All about dreams</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <!-- Le styles -->
        <link href="/css/bootstrap.slate.min.css" rel="stylesheet" />
        <link href="/css/app.css" rel="stylesheet" />

        <link href="/css/bootstrap-responsive.min.css" rel="stylesheet" />
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="/">NapTale</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class=""><a href="/top">Top</a></li>
                            <li class=""><a href="/new">New</a></li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="inner-container row">
                <div class="content span8">
                    <ul class="story-holder unstyled">
                        {{#dream}}
                        <li class="frontpage-story">
                            <div class="title btn btn-block"><a href="/read/{{id}}">{{title}}</a></div>
                            <p>{{story}}</p>
                            <div class="story-footer muted">By: {{author}} | On: {{date}} | At: {{time}} | (58) Comments</div>
                        </li>
                        {{/dream}}

                    </ul>
                    <div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'naptale'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    
                </div>
                <div class="sidebar span3">
                    <div class="shareButton btn btn-large span2" data-target="#submitModal" data-toggle="modal">Share My Dream!</div>
                </div>
                
            </div>
            
            <div id="footer">
                <div class="container">
                    <p class="muted credit">By <a href="http://mansoorsayed.com">Mansoor Sayed</a> and <a href="#">Damien Budnick</a>.</p>
                </div>
            </div>

            
            
            <!-- DYNAMIC CONTENT -->
            
            <!-- Modal -->
            <div id="submitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <form id="submit-form" action="/">
                <div class="modal-body">
                    <p id="modal-error-holder" class="text-error"></p>
                    <fieldset>
                        <legend>Share My Dream!</legend>
                        <label>Name</label>
                        <input type="text" name="author" placeholder="My Name…">
                        <label>Title</label>
                        <input type="text" name="title" placeholder="My Post Title…">
                        <label>About Your Dream:</label>
                        <textarea id="shareDreamInput" name="dream"></textarea>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <button class="btn btn-primary" type="submit">Share</button>
                </div>
                </form>
                <div id="form-ajax-indicator">
                    <div><img src="/img/ajax-loader.gif"></div>
                </div>
            </div>
            
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script src="/js/app.js"></script>
        
    </body>
</html>
