<apex:page sidebar="false" language="{!userLangString}" showHeader="false" controller="UnsubscribeController" cache="false">
    <style>
        .left {
            padding: 10px;
        }
        .leftbtn {
            position:relative;
            left: 30%;
        }
        .title{
            font-size:18px;
            padding-top:30px;
        }​
    
    </style>


    <apex:form id="frm">
        <apex:pagemessages />
        <apex:image id="theImage" value="{!$Resource.SonyMusiclogowordmark}" width="200" height="200" style="position: relative;left: 40%;"/>
        
        <div class="title leftbtn">
            <h1>{!$Label.manage_subscription}</h1>
        </div>
        
        <div class="leftbtn" style="padding-top:30px;font-size: 15px;">
            {!$Label.Please_enter_your_email_address}
        </div>
        <div class="leftbtn" style="padding-top:20px;">
            <apex:outputLabel value="Email Address:         " style="font-weight:800"></apex:outputLabel>
            <apex:inputText value="{!emailId}" style="width:300px;"/>&nbsp;&nbsp;&nbsp;<apex:commandButton value="Submit" action="{!getSubscriptionsFromEmail}" rerender="frm" status="statusSubs"/> 
        </div>
                
        <apex:outputPanel id="divSubscriptions" rendered="{!IF((fan != null),true,false)}" styleclass="leftbtn">
            <div style="padding-top:20px;width:460px;"><hr></hr></div>
            <div>
                <div class="title">
                    <h1>
                        {!$label.Your_Email_Newsletter_Subscriptions}
                    </h1>
                </div>
                <div>
                    <apex:selectCheckboxes id="optSubscriptions" value="{!selectedSubscriptions}" layout="PageDirection">
                        <apex:selectOptions value="{!Subscriptions}"/>
                    </apex:selectCheckboxes><br/>
                </div>
                <div>
                        <h1>{!$Label.Thinking_of_unsubscribing}</h1>
                        <div style="padding-top:10px;width: 500px;">{!$Label.unsubscribingNote}</div>

                </div>
                <apex:commandButton value="{!$Label.update_your_subscription}" action="{!unsubscribe}" rerender="frm" style="margin-top:20px;"/>
                 
            </div>
        </apex:outputPanel>
        <apex:outputpanel >
            <apex:actionstatus id="statusSubs">
                <apex:facet name="start">
                    <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;
                           height: 100%;opacity:0.65;width:100%;"> 
                        <div class="waitingHolder" style="top: 74.2px; width: 91px;">
                            <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                            <span class="waitingDescription">Please Wait....</span>
                        </div>
                    </div>
                </apex:facet>
            </apex:actionstatus>
        </apex:outputpanel>
     </apex:form>
</apex:page>