var EditSubscriptionModal = ModalFormView.extend({
	el: ".mediaDrawer.editSubscription",
	action: "/api/subscription",
	method: "put",
	
	fixedClose: true,
	
	events: {
	  "click [data-role='']": 'togglePasswordFields'
	},
	
	initialize: function(){
		this.$freePlan = this.$("#free_plan")
		this.$paidPlan = this.$("#paid_plan")
		this.$proLayoutRow = this.$("#proLayoutRow")

		this.$billingInterval = this.$("[data-role=billingInterval]")

		this.$planType = this.$("[data-role=planType]")
		this.$planName = this.$("[data-role=planName]")
		this.$planCost = this.$("[data-role=planCost]")

		this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]")
		this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]")

		this.$proLayoutCost = this.$("[data-role=proLayoutCost]")
		this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]")

		this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]")
		this.$cancelSubscription = this.$("[data-role=cancelSubscription]")
	},

	load: function(){
		this.reset()
		$.get("/api/subscription", function(data){
			if (data.error) {
				this.$freePlan.show()
				this.$paidPlan.hide()
				this.show()
				return
			}
			this.$freePlan.show()
			this.$paidPlan.hide()
			
			var plan = data.plans[ data.subscription.plan_name ]
			
			this.show()
			
			// layouts
		}.bind(this))
	},
	
	updateTotals: function(){
	},

})