{% load static from staticfiles %}
<html><head>
    <title>Connect with Facebook</title>
    <style>
        body {
            margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
            text-align:center; /* Hack for IE5/Win */
            background-color:#000;
            color: #333333;
            direction: ltr;
            font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
            font-size: 11px;
        }
        #footer {
            height: 80px;
        }
        .content {
            width:600px;
            margin:0px auto; /* Right and left margin widths set to "auto" */
            text-align:left; /* Counteract to IE5/Win Hack */
            padding:15px;
            border:1px solid #333;
            background-color:white;
        }
        .error {
            border: 1px solid red;
            margin-top: 10px;
            padding: 20px;
        }
        h2 {
            line-height: 20px;
            min-height: 20px;
            padding-bottom: 2px;
            vertical-align: bottom;
            color: #1C2A47;
            font-size: 16px;
        }
        a {
            color: #3B5998;
            cursor: pointer;
            text-decoration: none;
        }
        .messages {
            padding: 15px;
            background-color: #cdc;
            list-style: none;
        }

        #github a {
            -webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 10px 0px, rgba(0, 0, 0, 0.0664063) 0px 0px 3px 1px inset;
            -webkit-transform: matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, 0, 0);
            background-attachment: scroll;
            background-clip: border-box;
            background-color: #EF7600;
            background-image: none;
            background-origin: padding-box;
            border-bottom-color: #EF9F4C;
            border-bottom-style: solid;
            border-bottom-width: 2px;
            border-top-color: #EF9F4C;
            border-top-style: solid;
            border-top-width: 2px;
            box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 10px 0px, rgba(0, 0, 0, 0.0664063) 0px 0px 3px 1px inset;
            color: white;
            cursor: auto;
            display: block;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 13px;
            font-weight: bold;
            height: 19px;
            letter-spacing: -1px;
            line-height: 19px;
            margin-bottom: 0px;
            margin-left: -50px;
            margin-right: 0px;
            margin-top: 40px;
            overflow-x: visible;
            padding-bottom: 3px;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 3px;
            text-align: center;
            text-decoration: none;
            text-shadow: #522600 0px 0px 10px;
            width: 250px;
            z-index: 0;
        }
        #github {
            position: absolute;
            z-index: 100;
            top: 0px;
            right: 0px;
            width: 130px;
            height: 140px;
            overflow: hidden;
        }

        #rounded-corner
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #rounded-corner thead th
        {
            background: #b9c9fe;
        }

        #rounded-corner th
        {
            padding: 8px;
            font-weight: normal;
            font-size: 13px;
            color: #039;
            background: #b9c9fe;
        }
        #rounded-corner td
        {
            padding: 8px;
            background: #e8edff;
            border-top: 1px solid #fff;
            color: #669;
        }
        #rounded-corner tfoot td.rounded-foot-left
        {
            background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
        }
        #rounded-corner tfoot td.rounded-foot-right
        {
            background: #e8edff url('table-images/botright.png') right bottom no-repeat;
        }
        #rounded-corner tbody tr:hover td
        {
            background: #d0dafd;
        }

    </style>

    <link href="{% static "django_facebook/css/facebook.css"%}" type="text/css" rel="stylesheet" media="all" />

</head><body>
<div id="github"><a href="https://github.com/tschellenbach/Django-facebook" title="Fork me on GitHub">Fork me on Github</a></div>
<div>



<div class="content">
    <h2>Django Facebook - Test page</h2>
    <p>By Thierry Schellenbach
        <a href="http://www.mellowmorning.com/">mellowmorning.com</a>, <a href="http://twitter.com/tschellenbach">@tschellenbach</a>
    </p>
    <p>
        Soon you will be able to check <a href="http://www.django-facebook.com/">django-facebook.com</a> for more info.
    </p>
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mellowmorning.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</div>
<div class="content" style="margin-top: 10px;">
    {% if request.GET.fb_error_or_cancel or request.GET.error %}
        <div class="error">
            Please click allow in the facebook interface, to access Fashiolista
        </div>
    {% endif %}

    <div class="error" id="django_static_error">
        Couldn't load the static Javascript files, is django static configured correctly?
        <a href="http://docs.djangoproject.com/en/1.8/howto/static-files/" target="_blank">See the docs here.</a>
    </div>
    {% if messages %}
    <ul class="messages">
        {% for message in messages %}
        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}

    <div style="margin-top: 60px;">

        {% if not user.is_authenticated %}

        <div class="inner_content">

            <!--form to call registration via facebook -->
            <form action="{% url 'facebook_connect' %}" method="post">
                <h2>Register, login or connect with Facebook</h2>
                <br />
                {% csrf_token %}
                <input type="hidden" value="{{ request.path }}" name="next" />

                <!--
                use error next for a seperate error page
                <input type="hidden" value="/error/" name="error_next" />
                -->
                <div id="facebook_login_js">
                <input onclick="F.connect(this.parentNode.parentNode); return false;" type="image" src="{% static "django_facebook/images/facebook_login.png"%}" /><br />
                (javascript popup)
                </div>
                <br /><br />
                <div id="facebook_login_redirect">
                    <input type="image" src="{% static "django_facebook/images/facebook_login.png"%}" /><br />
                    (redirect version)
                </div>
            </form>

            You are not logged in, Please login by clicking one of the buttons above

        </div>

        {% endif %}


        <div id="header_bar">

        {% if user.is_authenticated %}
            <h1>Welcome {{ user }}</h1><a href="{% url 'auth_logout' %}?next={{ request.path|urlencode }}">logout</a><br />

            <p>
            Thank you for logging in with Facebook.
            By default you will have the following data available:
            </p>

            <table id="rounded-corner">
                <thead>
                    <tr>
                        <th>Field</th>
                        <th>Data</th>
                    </tr>
                </thead>
                <tr>
                    <td>First Name:</td><td>{{ user.first_name }}</td>
                </tr>
                <tr>
                    <td>Last Name:</td><td>{{ user.last_name }}</td>
                </tr>
                <tr>
                    <td>Gender:</td><td>{{ user.profile_or_self.gender }}</td>
                </tr>
                <tr>
                    <td>About me:</td><td>{{ user.profile_or_self.about_me }}</td>
                </tr>
                <tr>
                    <td>Facebook profile url:</td><td>{{ user.profile_or_self.facebook_profile_url }}</td>
                </tr>
                <tr>
                    <td>Facebook ID:</td><td>{{ user.profile_or_self.facebook_id }}</td>
                </tr>
                <tr>
                    <td>Date of Birth:</td><td>{{ user.profile_or_self.date_of_birth }}</td>
                </tr>
                <tr>
                    <td>Website Url:</td><td>{{ user.profile_or_self.website_url }}</td>
                </tr>
                {% if user.profile_or_self.image %}
                <tr>
                    <td>Local Image:</td><td><img src="{{ user.profile_or_self.image.url }}" title="local copy" /></td>
                </tr>
                {% endif %}
                <tr>
                    <td>Hotlinked Image:</td><td><img src="http://graph.facebook.com/{{ user.profile_or_self.facebook_id }}/picture?type=large" title="facebook stored image" /><br /></td>
                </tr>
                <tr>
                    <td>Likes:</td>
                    <td>
                        <ul>
                        {% for like in user.profile_or_self.likes|slice:":5" %}
                            <li>{{ like.name }}</li>
                        {% endfor %}
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Friends:</td>
                    <td>
                        <ul>
                        {% for friend in user.profile_or_self.friends|slice:":5" %}
                            <li>{{ friend.name }}</li>
                        {% endfor %}
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Getting More:</td><td>Facebook has a ton more data, read about it <a href="https://developers.facebook.com/docs/reference/api/">here</a>.</td>
                </tr>
            </table>

            <p>
                You can connect users which registered the old fashioned way, by giving them the following option to connect.
                Note that we explitly indicate that we are connecting using the connect_facebook=1 value.
            </p>
            <form action="{% url 'facebook_connect' %}?facebook_login=1" method="post">
                <a href="javascript:void(0);" onclick="F.connect(this.parentNode);">Connect this account to Facebook</a> (used to connect non facebook accounts)
                <input type="hidden" value="{{ request.path }}" name="next" />
                <input type="hidden" name="connect_facebook" value="1">
                {% csrf_token %}
            </form>
        {% endif %}

    </div>

    <div id="footer">

        </div>
        <div style="float: right;">
            <h4>Advanced Testing</h4>
            <form action="{% url 'facebook_connect' %}?facebook_login=1" method="post">
                <a href="javascript:void(0);" onclick="F.connect(this.parentNode);">Test fresh registration</a>
                <input type="hidden" value="{{ request.path }}" name="next" />
                <input type="hidden" value="1" name="force_registration_hard" />
                {% csrf_token %}
            </form>
            <form action="{% url 'facebook_connect' %}?facebook_login=1" method="post">
                <a href="javascript:void(0);" onclick="F.connect(this.parentNode);">Test registration</a>
                <input type="hidden" value="{{ request.path }}" name="next" />
                <input type="hidden" value="1" name="force_registration" />
                {% csrf_token %}
            </form>
        </div>
    </div>

   <br /><br /><br /><br /><br /><br /><br />
    <div id="image_upload" style="margin: 60px 0px 20px 0px;">
        <h2>Album upload flow</h2>
        <div>
            <form action="{% url 'facebook_image_upload' %}" method="get">
                {% csrf_token %}
                <input type="hidden" value="{{ request.path }}" name="next" />

                <img src="http://e.fashiocdn.com/images/entities/0/7/z/0/D/0.126x126.jpg" alt="image"/>
                <input type="hidden" value="http://e.fashiocdn.com/images/entities/0/7/z/0/D/0.365x365.jpg" name="pictures" />

                <img src="http://d.fashiocdn.com/images/entities/0/6/T/p/8/0.126x126.jpg" alt="image"/>
                <input type="hidden" value="http://d.fashiocdn.com/images/entities/0/6/T/p/8/0.365x365.jpg" name="pictures" />
                <br />

                <input type="submit" value="Upload to your album" />
            </form>
        </div>
    </div>

    <div id="wall_post" style="margin: 60px 0px 20px 0px;">
        <h2>Post to My Wall</h2>
        <div>
            <form action="{% url 'facebook_wall_post' %}" method="get">
                {% csrf_token %}
                <input type="hidden" value="{{ request.path }}" name="next" />

                <textarea name="message" rows="3" cols="35">Check out fashiolista.com, loving it :)</textarea>
                <br />
                <input type="submit" value="Post to your wall" />
            </form>
        </div>
    </div>

    <div id="wall_post" style="margin: 60px 0px 20px 0px;">
        <h2>Post to My Wall - Javascript Popup version</h2>
        <div>
            <form action="{% url 'facebook_wall_post' %}" method="post">
                {% csrf_token %}
                <input type="hidden" value="{{ request.path }}" name="next" />

                <textarea name="message" rows="3" cols="35">Check out fashiolista.com, loving it :)</textarea>
                <br />
                <input type="submit" value="Post to your wall" onclick="F.connect(this.parentNode, ['publish_stream']); return false;"/>
            </form>
        </div>
    </div>

    <div id="canvas_page" style="margin: 60px 0px 20px 0px;">
        <h2>Canvas page Example</h2>
        Note for the page tab and canvas example to work you need to serve the example at:
        https://vagrant.mellowmorning.com/facebook/example/
        <a href="http://apps.facebook.com/django_facebook_test/">Canvas page example</a>
    </div>

    <div id="page_tab" style="margin: 60px 0px 20px 0px;">
        <h2>Page tab example</h2>
        Note for the page tab and canvas example to work you need to serve the example at:
        https://vagrant.mellowmorning.com/facebook/example/
        <a href="https://www.facebook.com/dialog/pagetab?app_id={{ FACEBOOK_APP_ID }}&next=https://vagrant.mellowmorning.com/facebook/example/">Add the test page tab</a>
    </div>

</div>

<script src="{% static "django_facebook/js/statictest.js"%}" type="text/javascript"></script>

{% include 'django_facebook/_facebook_js.html' %}

</div>
</body></html>
